:root {
  --roundedXS: var(--gapX1);
  --roundedS: var(--gapX2);
  --roundedM: var(--gapX4);
  --roundedL: var(--gapX8);
  --roundedXL: var(--gapX15);
}

/* Roundness */
img.roundedXS,
.aspect-ratio-wrapper.roundedXS {
  border-radius: var(--roundedXS);
}

img.roundedS,
.aspect-ratio-wrapper.roundedS {
  border-radius: var(--roundedS);
}

img.roundedM,
.aspect-ratio-wrapper.roundedM {
  border-radius: var(--roundedM);
}

img.roundedL,
.aspect-ratio-wrapper.roundedL {
  border-radius: var(--roundedL);
}

img.roundedXL,
.aspect-ratio-wrapper.roundedXL {
  border-radius: var(--roundedXL);
}


/* Legacy */

.aspect-ratio-wrapper {
  position: relative;
  background: #0001;
  width: 100%;
}

/* .aspect-ratio-wrapper img {
  object-fit: cover;
  object-position: top;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}
 */
 
/** Borderness **/
img.bordered {
  border: 1px solid #eee;
}

/** Sizes **/
img.text-size {
  max-width: var(--textMaxWidth);
  width: 100%;
}

img.full-size {
  width: 100%;
}

/** Effects **/
img.brightness {
  filter: brightness(0.98);
}

.xleb-illustration.fit-contain {
  object-fit: contain;
}

.xleb-illustration.fit-cover {
  object-fit: cover;
}

.xleb-illustration.fit-fill {
  object-fit: fill;
}

.xleb-illustration.position-top {
  object-position: top;
}

.xleb-illustration.position-center {
  object-position: center;
}

.xleb-illustration.position-bottom {
  object-position: bottom;
}

.xleb-illustration.position-left {
  object-position: left;
}

.xleb-illustration.position-right {
  object-position: right;
}

body .lg-backdrop {
  /* backdrop-filter: blur(0px); */
  transition: all 333ms ease-in 0s;
}

body .lg-backdrop.in {
  opacity: 0.4 !important;
  /* backdrop-filter: blur(10px); */
}

body .lg-outer.lg-visible {
  backdrop-filter: blur(20px);
}

body .lg-outer {
  backdrop-filter: blur(0px);
  transition: all .15s ease 0s;
}

body .lg-outer .lg-thumb-outer {
  background-color: unset;
}

body :is(.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover) {
  border-color: var(--accentColor);
}

body .lg-toolbar .lg-icon {
  color: var(--gray200);
}

body .lg-counter {
  color: var(--gray200);
}

body :is(.lg-next, .lg-prev) {
  background-color: unset;
}

body .lg-next::before,
body .lg-prev::after {
  color: var(--gray200);
}

@media (max-width: 767px) {
  .xs-16-9 {
    /* padding-bottom: calc(9 / 16 * 100%); */
    aspect-ratio: 16/9
  }

  .xs-4-3 {
    /* padding-bottom: 75%; */
    aspect-ratio: 4/3
  }

  .xs-1-1 {
    /* padding-bottom: 100%; */
    aspect-ratio: 1/1
  }
}

@media (min-width: 768px) {
  .sm-16-9 {
    /* padding-bottom: calc(9 / 16 * 100%); */
    aspect-ratio: 16/9
  }

  .sm-4-3 {
    /* padding-bottom: 75%; */
    aspect-ratio: 4/3
  }

  .sm-1-1 {
    /* padding-bottom: 100%; */
    aspect-ratio: 1/1
  }
}

@media (min-width: 992px) {
  .md-16-9 {
    /* padding-bottom: calc(9 / 16 * 100%); */
    aspect-ratio: 16/9
  }

  .md-4-3 {
    /* padding-bottom: 75%; */
    aspect-ratio: 4/3
  }

  .md-1-1 {
    /* padding-bottom: 100%; */
    aspect-ratio: 1/1
  }
}

@media (min-width: 1200px) {
  .lg-16-9 {
    /* padding-bottom: calc(9 / 16 * 100%); */
    aspect-ratio: 16/9
  }

  .lg-4-3 {
    /* padding-bottom: 75%; */
    aspect-ratio: 4/3
  }

  .lg-1-1 {
    /* padding-bottom: 100%; */
    aspect-ratio: 1/1
  }
}