@media (max-width: 1024px) {
  .snap {
    height: 100dvh;
    scroll-snap-stop: always;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .panel {
    padding: 0 8vw;
  }

  .step-nav {
    left: 50%;
    top: auto;
    bottom: 4vh;
    transform: translateX(-50%);
    flex-direction: row;
  }

  .carousel {
    grid-template-columns: 1fr;
  }

  .nav {
    display: none;
  }

  .track {
    --card-width-mobile: min(78vw, 340px);
    grid-auto-columns: var(--card-width-mobile);
    padding-inline: calc(50% - (var(--card-width-mobile) / 2));
    scroll-padding-inline: calc(50% - (var(--card-width-mobile) / 2));
    scroll-snap-stop: always;
  }

  .card {
    min-height: 0;
    padding: 1.25rem;
    border-radius: 20px;
  }

  .card img,
  .media {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
  }

}

@media (max-width: 640px) {
  .track {
    --card-width-mobile: min(86vw, 320px);
  }

  .card {
    padding: 1.1rem;
    gap: 0.75rem;
  }
}