@layer components {
  .large-image-accordion {
    overflow-x: clip;
  }
  .large-image-accordion__top-wrapper {
    min-height: 37rem;
    border-radius: var(--panel-border-radius);
  }
  .large-image-accordion__top-wrapper::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-overlay-bottom);
    transition: all 0.25s ease-out;
  }
  .large-image-accordion__top-wrapper.open::before {
    background: var(--ui-images-overlays-image-tint);
  }
  .large-image-accordion__image {
    top: 0;
    inset-inline-start: 0;
    border-radius: var(--panel-border-radius);
  }
  .large-image-accordion__top-content {
    bottom: 0;
    max-width: 60rem;
  }
  .large-image-accordion__expand-cta {
    position: absolute;
    bottom: 0;
    z-index: 2;
    inset-inline-end: 2.8rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s;
    transform: translateY(50%);
    width: auto;
  }
  .large-image-accordion .swiper-slide {
    opacity: 0.6;
  }
  .large-image-accordion .swiper-slide-active {
    opacity: 1;
  }
  .large-image-accordion .swiper-slide-active .large-image-accordion__expand-cta {
    opacity: 1;
    visibility: visible;
  }
  .large-image-accordion .swiper-slide-active .large-image-accordion__bottom-wrapper.open {
    max-height: 200rem;
  }
  .large-image-accordion__bottom-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease-out;
  }
  .large-image-accordion .carousel-arrow {
    position: absolute;
    z-index: 2;
    top: 16.5rem;
    width: 100%;
  }
  .large-image-accordion .carousel-arrow .arrow-button {
    position: absolute;
  }
  .large-image-accordion .carousel-arrow .arrow-button:first-of-type {
    inset-inline-start: 0;
  }
  .large-image-accordion .carousel-arrow .arrow-button:last-of-type {
    inset-inline-end: 0;
  }
  @media (min-width: 768px) {
    .large-image-accordion__top-wrapper {
      min-height: 56.8rem;
    }
    .large-image-accordion__top-content {
      padding-inline-start: 5.6rem;
    }
    .large-image-accordion__bottom-wrapper {
      margin-inline: 5.6rem;
      margin-block: 0;
    }
    .large-image-accordion__expand-cta {
      inset-inline-end: 4.4rem;
    }
    .large-image-accordion .carousel-arrow {
      top: 26.4rem;
    }
  }
  @media (min-width: 1200px) {
    .large-image-accordion__top-wrapper::before {
      background: var(--gradient-overlay-bottom);
    }
    .large-image-accordion__top-wrapper.open .large-image-accordion__hidden-content {
      max-height: 40rem;
      transition: all 0.5s ease-in;
    }
    .large-image-accordion__top-content {
      padding-inline-start: var(--md-3);
      max-width: 64rem;
    }
    .large-image-accordion__bottom-wrapper {
      margin: 0;
    }
    .large-image-accordion__hidden-content {
      max-height: 0;
      overflow: hidden;
      transition: all 0.25s ease-out;
    }
    .large-image-accordion .swiper-slide-active:hover .large-image-accordion__top-wrapper::before {
      background: var(--ui-images-overlays-image-tint);
    }
    .large-image-accordion .swiper-slide-active:hover .large-image-accordion__hidden-content {
      max-height: 40rem;
      transition: all 0.5s ease-in;
    }
    .large-image-accordion .carousel-arrow .arrow-button:first-of-type {
      inset-inline-start: calc(-33.33333332% + var(--bs-gutter-x) + 4.4rem);
    }
    .large-image-accordion .carousel-arrow .arrow-button:last-of-type {
      inset-inline-end: calc(-33.33333332% + var(--bs-gutter-x) + 4.4rem);
    }
  }
}