.soxo__dz-ch-2025.soxo__slider {
  overflow: clip;
}

.soxo__dz-ch-2025 .soxo__slider__item {
  overflow: clip;
  position: relative;
  isolation: isolate;
}

.soxo__dz-ch-2025 .soxo__slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: object-position 500ms;
}

.soxo__dz-ch-2025 .soxo__slider__item .content {
  position: absolute;
  inset: auto 0 0;
  padding: 1em;
  background: linear-gradient(transparent, #000000);
  font-size: max(1.6rem, 4vw);
  line-height: 1.3;
  color: #f0f0f0;
}

.soxo__dz-ch-2025 .soxo__slider__item .content p + p {
  margin-top: 0.5em;
}

@media (width < 757px) {
  .soxo__dz-ch-2025 .soxo__slider-wrapper {
    display: grid;
    grid-template-areas: "collapse";
    padding: 1rem 10%;
    background: linear-gradient(30deg, #faf9f6, #f9f6ee);
    aspect-ratio: 0.75;
  }

  .soxo__dz-ch-2025 .soxo__slider__item {
    grid-area: collapse;
    border-radius: 10px;
    box-shadow: 0 0 0.5rem 0 #0000007f;
    opacity: 0;
  }

  .soxo__dz-ch-2025 .soxo__slider__item.active {
    opacity: 1;
  }

  .soxo__dz-ch-2025 .soxo__slider__item.prev {
    z-index: 1;
    animation: customMoveOut 500ms;
  }

  .soxo__dz-ch-2025 .soxo-interactive-banner__header img {
    height: 2.25lh;
    max-width: max-content;
  }
}

@media (width >= 757px) {
  .soxo__dz-ch-2025 .soxo__slider-wrapper {
    display: flex;
    gap: 1rem;
    aspect-ratio: 2;
  }

  .soxo__dz-ch-2025 .soxo__slider__item {
    flex: 1 1 0;
    transition: 250ms;
    transition-property: flex, filter;
  }

  .soxo__dz-ch-2025 .soxo__slider__item:hover {
    flex-grow: 4;
  }

  .soxo__dz-ch-2025 .soxo__slider__item:hover img {
    object-position: 50% 90%;
  }

  .soxo__dz-ch-2025 .soxo__slider-wrapper:has(.soxo__slider__item:hover) .soxo__slider__item:not(:hover) {
    filter: saturate(0.25) brightness(0.5);
  }

  .soxo__dz-ch-2025
    .soxo__slider-wrapper:has(.soxo__slider__item:hover)
    .soxo__slider__item:hover
    + .soxo__slider__item,
  .soxo__dz-ch-2025
    .soxo__slider-wrapper:has(.soxo__slider__item:hover)
    .soxo__slider__item:has(+ .soxo__slider__item:hover) {
    filter: saturate(0.625) brightness(0.75);
  }

  .soxo__dz-ch-2025 .soxo__slider__item .content {
    font-size: clamp(1.2rem, 1.5vw, 2.4rem);
    transition: translate 125ms 250ms ease-out;
  }

  .soxo__dz-ch-2025 .soxo__slider__item:not(:hover) .content {
    transition: unset;
    translate: 0 100%;
  }

  .soxo__dz-ch-2025 .soxo-interactive-banner__header img {
    height: 1lh;
    max-width: max-content;
  }
}

@media (width >= 979px) {
  .soxo__dz-ch-2025 .soxo__slider-wrapper {
    aspect-ratio: 3;
  }

  .soxo__dz-ch-2025 .soxo__slider__item {
    &:hover {
      flex-grow: 2;
    }
  }
}

@keyframes customMoveOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  to {
    translate: 100% 0;
    rotate: 15deg;
    scale: 1.125;
  }
}