:root.no-scroll {
  overflow: hidden;
  overscroll-behavior-y: none;
}

.media-slider,
.media-slider *,
.media-slider *::before,
.media-slider *::after,
.popup-media-slider,
.popup-media-slider *,
.popup-media-slider *::before,
.popup-media-slider *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  vertical-align: baseline;
  color: inherit;
  background: transparent;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.media-slider {
  --slider-spacing: 6px;
  --thumbs-size: 40px;
  --thumb-padding: 6px;
  --slider-fg: #fff;
  --slider-bg: hsla(0, 0%, 0%, .2);
  --slider-border: hsla(0, 0%, 50%, .3);
  --thumb-bg: hsl(0, 0%, 0%);
  position: relative;
  width: 100%;
  overflow: hidden;
}
.media-slider-dusk .media-slider {
  --slider-fg: #8168ff;
  --slider-bg: #131313;
  --slider-border: #000;
  --thumb-bg: #f4f4f4;
}
.media-slider-noon .media-slider {
  --slider-fg: #ffd615;
  --slider-bg: #131313;
  --slider-border: #e4e5e8;
  --thumb-bg: #f4f4f4;
}
.media-slider-combat .media-slider {
  --slider-fg: #FED36A;
  --slider-bg: #26232E;
  --slider-border: #26232E;
  --thumb-bg: #26232E;
}
.media-slider-flow .media-slider {
  --slider-fg: #2CB1BC;
  --slider-bg: #fff;
  --slider-border: #D9E2EC;
  --thumb-bg: #fff;
}
@media (width > 360px) {
  .media-slider {
    --slider-spacing: 12px;
    --thumbs-size: 55px;
  }
}
@media (width > 600px) {
  .media-slider {
    --thumbs-size: 70px;
  }
}
@media (width > 960px) {
  .media-slider {
    --thumbs-size: 90px;
  }
}
.media-slider .slider {
  width: 100%;
  min-height: 200px;
  overflow: hidden;
  background-color: var(--slider-bg);
  border: 1px solid var(--slider-border);
  border-radius: 0.55rem;
  margin-bottom: var(--slider-spacing);
}
.media-slider .slider::part(container) {
  --swiper-navigation-size: 24px;
  --swiper-theme-color: var(--slider-fg);
}
.media-slider .slider::part(wrapper) {
  align-items: center;
}
.media-slider .slide {
  align-content: center;
}
.media-slider .slide-image {
  display: block;
  margin: auto;
  max-width: 100%;
  min-height: 200px;
  max-height: 100%;
  padding: var(--slider-spacing);
  object-fit: contain;
}
.media-slider .slide-frame {
  display: block;
  margin: auto;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 16/9;
}
.media-slider .thumbs {
  display: flex;
  gap: var(--slider-spacing);
  align-items: stretch;
  flex-wrap: wrap;
}
.media-slider .thumb {
  display: block;
  width: var(--thumbs-size);
  height: var(--thumbs-size);
  padding: var(--thumb-padding);
  border-radius: 0.25rem;
  background-color: var(--thumb-bg);
  cursor: pointer;
}
.media-slider .thumb-image,
.media-slider .thumb-youtube {
  width: calc(var(--thumbs-size) - var(--thumb-padding) * 2);
  height: calc(var(--thumbs-size) - var(--thumb-padding) * 2);
  transition: opacity 0.3s ease-in-out;
}
.media-slider .thumb:not(.active) .thumb-image,
.media-slider .thumb:not(.active) .thumb-youtube {
  opacity: 0.5;
}
.media-slider .thumb-image {
  display: block;
  object-fit: contain;
}
.media-slider .thumb-youtube {
  position: relative;
  align-content: center;
}
.media-slider .thumb-youtube img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.media-slider .thumb-youtube::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30px;
  height: 30px;
  background-color: var(--slider-fg);
  mask: url("https://template-assets.tebex.io/images/play.svg") center center/contain no-repeat;
}
.media-slider .open-lightbox {
  position: absolute;
  right: var(--slider-spacing);
  bottom: calc(var(--thumbs-size) + var(--slider-spacing) * 2);
  z-index: 2;
  align-content: center;
  width: 40px;
  height: 40px;
  backdrop-filter: blur(5px);
  background-color: transparent;
  border-radius: 0.25rem;
  visibility: hidden;
  line-height: 0;
  font-size: 0;
  color: transparent;
  opacity: 0;
  transition: all 0.15s ease-in-out;
}
.media-slider .open-lightbox:hover, .media-slider .open-lightbox:focus {
  background-color: rgb(from var(--slider-bg) r g b/10%);
}
.media-slider .open-lightbox::before {
  content: "";
  display: block;
  margin: auto;
  width: 18px;
  height: 18px;
  flex: none;
  background-color: rgb(from var(--slider-fg) r g b/70%);
  mask: url("https://template-assets.tebex.io/images/fullscreen.svg") center center/contain no-repeat;
  transition: background-color 0.15s ease-in-out;
}
.media-slider .open-lightbox:hover, .media-slider .open-lightbox:focus {
  background-color: var(--slider-bg);
}
.media-slider .open-lightbox:hover::before, .media-slider .open-lightbox:focus::before {
  background-color: var(--slider-fg);
}
.media-slider .slider:has(.swiper-slide-active .slide-image):hover ~ .open-lightbox,
.media-slider .open-lightbox:hover {
  opacity: 1;
  visibility: visible;
}

.popup-media-slider {
  --fade-duration: 300ms;
  --slider-spacing: 6px;
  --thumbs-size: 40px;
  --thumb-padding: 6px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: minmax(0, auto) calc(var(--thumbs-size) + var(--slider-spacing));
  overflow: hidden;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  transition: background-color var(--fade-duration) ease, opacity var(--fade-duration) ease-in-out, display var(--fade-duration) allow-discrete;
}
@starting-style {
  .popup-media-slider {
    opacity: 0;
  }
}
.popup-media-slider[hidden] {
  opacity: 0;
  display: none;
}
@media (width > 360px) {
  .popup-media-slider {
    --slider-spacing: 12px;
    --thumbs-size: 70px;
  }
}
@media (width > 600px) {
  .popup-media-slider {
    --thumbs-size: 70px;
  }
}
@media (width > 960px) {
  .popup-media-slider {
    --thumbs-size: 90px;
  }
}
@media (width > 1400px) {
  .popup-media-slider {
    --thumbs-size: 120px;
  }
}
.popup-media-slider .popup-close {
  position: absolute;
  top: var(--slider-spacing);
  right: var(--slider-spacing);
  z-index: 2;
  width: 40px;
  height: 40px;
  background: url("https://template-assets.tebex.io/images/close.svg") center center no-repeat;
  background-size: 20px;
  opacity: 0.5;
  backdrop-filter: blur(5px);
  border-radius: 0.25rem;
  line-height: 0;
  font-size: 0;
  color: transparent;
  transition: all 0.15s ease-in-out;
}
@media (width <= 600px) {
  .popup-media-slider .popup-close {
    width: 50px;
    height: 50px;
    background-size: 24px;
  }
}
.popup-media-slider .popup-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}
.popup-media-slider .slider {
  width: 100%;
}
.popup-media-slider .slider::part(container) {
  --swiper-navigation-size: 30px;
  --swiper-theme-color: #fff;
}
@media (width > 600px) {
  .popup-media-slider .slider::part(container) {
    --swiper-navigation-size: 36px;
  }
}
.popup-media-slider .slider::part(wrapper) {
  align-items: center;
}
.popup-media-slider .slide {
  align-content: center;
  padding: var(--slider-spacing);
}
.popup-media-slider .slide-image {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.popup-media-slider .slide-frame {
  display: block;
  margin: auto;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 16/9;
}
.popup-media-slider .thumbs {
  display: flex;
  gap: var(--slider-spacing);
  align-items: stretch;
  flex-wrap: wrap;
  padding: 0 var(--slider-spacing) var(--slider-spacing);
}
.popup-media-slider .thumb {
  display: block;
  width: var(--thumbs-size);
  height: var(--thumbs-size);
  padding: var(--thumb-padding);
  background-color: hsla(0, 0%, 0%, 0.7);
  cursor: pointer;
}
.popup-media-slider .thumb-image,
.popup-media-slider .thumb-youtube {
  width: calc(var(--thumbs-size) - var(--thumb-padding) * 2);
  height: calc(var(--thumbs-size) - var(--thumb-padding) * 2);
  transition: opacity 0.3s ease-in-out;
}
.popup-media-slider .thumb:not(.active) .thumb-image,
.popup-media-slider .thumb:not(.active) .thumb-youtube {
  opacity: 0.5;
}
.popup-media-slider .thumb-image {
  display: block;
  object-fit: contain;
}
.popup-media-slider .thumb-youtube {
  position: relative;
  align-content: center;
}
.popup-media-slider .thumb-youtube img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.popup-media-slider .thumb-youtube::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36px;
  height: 36px;
  background-color: #fff;
  mask: url("https://template-assets.tebex.io/images/play.svg") center center/contain no-repeat;
}