.feature-gallery {
  margin: 0 auto 64px;
  max-width: 980px;
}

.feature-tablet {
  position: relative;
  padding: 16px 23px;
  border: 2px solid #63695f;
  border-radius: 36px;
  background: #242622;
  box-shadow: 0 3px 0 #191c18, 0 24px 48px -22px #394a3d50;
  container-type: inline-size;
}

.feature-tablet::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 9px;
  width: 4px;
  height: 4px;
  border: 1px solid #53594e;
  border-radius: 50%;
}

.feature-screen-viewport {
  position: relative;
  aspect-ratio: 1.57;
  overflow: hidden;
  border-radius: 22px;
  background: #f9fbf7;
  touch-action: pan-y;
  user-select: none;
}

.feature-screen-slide { position: absolute; inset: 0; }

.feature-screen-slide[hidden],
.feature-gallery [hidden] { display: none; }

.feature-gallery-controls { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 30px; }

.feature-gallery-arrow { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border: 1px solid #d8e3d2; border-radius: 50%; background: #fff; color: var(--ink); font-size: 1.2rem; transition: background 200ms ease, border-color 200ms ease; }

.feature-gallery-arrow:hover { background: var(--tint); border-color: #9dbf95; }

.feature-gallery-caption { display: grid; gap: 5px; text-align: center; width: 310px; margin: 0; }

.feature-gallery-caption > span { font-size: .7rem; letter-spacing: .12em; color: var(--muted); }

.feature-gallery-caption > strong { font-family: Geologica, Arial, sans-serif; font-size: 1rem; font-weight: 400; }

.feature-gallery-dots { display: flex; justify-content: center; margin-top: 12px; }

.feature-gallery-dots button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; }

.feature-gallery-dots span { width: 7px; height: 7px; border-radius: 8px; background: #ced9c8; transition: width 250ms ease, background 250ms ease; }

.feature-gallery-dots button[aria-pressed=true] span { width: 24px; background: #9dbf95; }

@media (max-width: 760px) {
.feature-gallery { margin-bottom: 40px; }

.feature-tablet { width: min(280px, 100%); margin: 0 auto; aspect-ratio: .49; padding: 9px; border-radius: 36px; }

.feature-tablet::before { top: 15px; left: 50%; transform: translateX(-50%); width: 56px; height: 15px; border: 0; background: #242622; border-radius: 15px; z-index: 2; }

.feature-screen-viewport { position: absolute; inset: 9px; aspect-ratio: auto; border-radius: 27px; }

.feature-gallery-controls { gap: 12px; margin-top: 24px; }

.feature-gallery-caption { width: 210px; }

.feature-gallery-caption > strong { font-size: .85rem; }

.feature-gallery-arrow { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
.feature-gallery-arrow, .feature-gallery-dots span { transition: none; }
}