.lightbox-section .splide__slide img {
  width: 100%;
  height: auto;
}
.lightbox-section .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lightbox-section #main-carousel ul img {
  height: 79%;
}
.lightbox-section #main-carousel ul li:first-of-type img {
  transform: scaleX(-1);
}

.lightbox-section .splide__slide {
  opacity: 0.6;
}

.lightbox-section .splide__slide.is-active {
  opacity: 1;
}
.lightbox-section
  #thumbnail-carousel
  .splide__track--nav
  > .splide__list
  > .splide__slide
  img {
  border-radius: 8px;
}
.lightbox-section
  #thumbnail-carousel
  .splide__track--nav
  > .splide__list
  > .splide__slide.is-active {
  border: 2px solid #fff;
  border-radius: 10px;
}

.lightbox-section #lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(26, 26, 26, 0.9);
  overflow-y: auto;
}

.lightbox-section #lightbox-content {
  position: relative;
}

/* .lightbox-section #main-carousel ul img {
  aspect-ratio: 16/9;
} */

.lightbox-section #lightbox.standard-paragraph-spacing {
  padding-top: 96px;
  padding-bottom: 48px;
}
.lightbox-section #lightbox.standard-paragraph-spacing .content {
  max-width: 1112px;
  margin-left: auto;
  margin-right: auto;
}

.lightbox-section #lightbox {
  margin: auto;
}

.lightbox-section .slide-caption {
  color: #fff;
  margin-top: 12px;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.lightbox-section .slide-caption span:last-of-type {
  font-style: italic;
}

.no-scroll {
  overflow: hidden;
  height: 100vh;
}

#thumbnail-carousel .splide__track {
  max-width: 75%;
  margin-right: auto;
  margin-left: auto;
  opacity: 0;
}

.splide__arrows .splide__arrow,
.close-lightbox {
  width: 48px;
  height: 48px;
  opacity: 1;
  transition: opacity ease 0.2s;
}
.close-lightbox {
  top: -64px;
  right: 0;
}

/* one close button abs positioned inside content on 768+, a different close btn shown on mobile abs positioned outside content */
#lightbox-content > .close-lightbox {
  display: block;
}
#main-carousel > .close-lightbox {
  display: none;
}

.splide__arrows .splide__arrow:hover:not(:disabled),
.close-lightbox:hover {
  opacity: 0.9;
}

.splide__arrows .splide__arrow--prev {
  left: 0;
}
.splide__arrows .splide__arrow--next {
  right: 0;
}
/* special option, narrow class, for images that look better more vertical oriented */
.lightbox-section #main-carousel li.narrow img,
.lightbox-section #main-carousel li.narrow .slide-caption {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.lightbox-section .splide__track {
  overflow: inherit;
}

@media screen and (min-width: 768px) {
  .lightbox-section #main-carousel ul img {
    /* height: calc(70dvh - 48px); */
    height: calc(100dvh - 400px);
    aspect-ratio: inherit;
    max-height: 697px;
  }
  #thumbnail-carousel .splide__track {
    opacity: 1;
  }
  #main-carousel {
    margin-bottom: auto;
  }
  /* one close button abs positioned inside content on 768+, a different close btn shown on mobile abs positioned outside content */
  #lightbox-content > .close-lightbox {
    display: none;
  }
  #main-carousel > .close-lightbox {
    display: block;
  }
  .lightbox-section .splide__track {
    overflow: hidden;
  }
}
@media screen and (min-width: 1200px) {
  .close-lightbox {
    top: inherit;
    right: -135px;
  }
  .lightbox-section #lightbox.standard-paragraph-spacing {
    padding-left: 200px;
    padding-right: 200px;
  }
  #main-carousel {
    margin-bottom: inherit;
  }
}
@media screen and (min-width: 768px) and (max-height: 600px) {
  .lightbox-section #lightbox.standard-paragraph-spacing #main-carousel {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .lightbox-section #lightbox.standard-paragraph-spacing .content {
    height: auto!important;
  }
  .lightbox-section #main-carousel ul img {
    min-height: 300px;
  }
}
@media screen and (min-width: 1300px) and (max-height: 750px) {
  .lightbox-section #lightbox.standard-paragraph-spacing #main-carousel {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}