.carousel-stage {
  width: min(920px, 100%) !important;
  margin: 0 auto;
}

.screenshots {
  display: grid;
  overflow: visible;
  scroll-snap-type: none;
  touch-action: pan-y;
}

.gallery-slide {
  grid-area: 1 / 1;
  min-width: 0;
}

.screenshots.carousel-ready .gallery-slide:not(.is-active) {
  visibility: hidden;
  pointer-events: none;
}

.screenshots.carousel-ready .gallery-slide.is-active {
  animation: reveal-slide 220ms ease-out both;
}

.gallery-slide .device {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 86px);
  width: 100% !important;
  margin: 0 !important;
}

.device-screen {
  grid-column: 1;
  grid-row: 1;
}

.dynamic-island {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  top: auto;
  left: auto;
  align-self: start;
  justify-self: center;
  width: 34%;
  margin-top: 16px;
}

.device figcaption {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.device figcaption strong {
  font-size: clamp(30px, 3.3vw, 44px);
}

.device figcaption span {
  margin-top: 12px;
  font-size: 17px;
}

.device figcaption p {
  margin-top: 23px;
  max-width: 390px;
  font-size: 18px;
  line-height: 1.6;
}

.carousel-button { top: 46%; }
.carousel-previous { left: -58px; right: auto; }
.carousel-next { left: auto; right: -58px; }
.gallery-nav { margin-top: 30px; }

@keyframes reveal-slide {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 760px) {
  .carousel-stage { width: 100% !important; }
  .gallery-heading { flex-wrap: wrap; }

  .gallery-slide .device {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .device-screen,
  .dynamic-island {
    grid-column: 1;
    grid-row: 1;
    width: min(300px, calc(100% - 44px));
    justify-self: center;
  }

  .dynamic-island {
    width: 100px;
    margin-top: 14px;
  }

  .device figcaption {
    grid-column: 1;
    grid-row: 2;
    padding: 0 22px;
  }

  .device figcaption strong { font-size: 27px; }
  .device figcaption span { font-size: 15px; }
  .device figcaption p { margin-top: 13px; font-size: 15px; }
  .carousel-button { top: 34%; }
  .carousel-previous { left: 0; }
  .carousel-next { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .screenshots.carousel-ready .gallery-slide.is-active { animation: none; }
}