:root {
  --bg: #27201d;
  --radius: 0.75rem;
  --margin: clamp(1.25rem, 2.2vw, 3rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

.card-stack__track {
  height: 600vh;
}

.card-stack__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
}

.card-stack__pin {
  position: relative;
  width: calc(100% - var(--margin) * 2);
  max-width: 30rem;
}

.card-stack__list-wrap {
  width: 100%;
  position: relative;
}

.card-stack__list {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  perspective: 25vw;
  overflow: visible;
}

.card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: clip;
  will-change: transform;
  backface-visibility: hidden;
}

.card__visual {
  position: absolute;
  inset: 0;
}

.card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .card-stack__pin {
    max-width: 22rem;
  }

  .card-stack__list {
    aspect-ratio: 1;
    perspective: 40vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
