* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: #cf6683 #fff1ea;
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(248, 213, 220, 0.7) 0 180px, transparent 182px),
    radial-gradient(circle at 88% 18%, rgba(159, 195, 221, 0.72) 0 160px, transparent 162px),
    linear-gradient(135deg, #fffaf4 0%, #f9eee9 48%, #fff7ef 100%);
}

body::-webkit-scrollbar {
  width: 14px;
}

body::-webkit-scrollbar-track {
  background: linear-gradient(#fff7ef, #f6e1df);
}

body::-webkit-scrollbar-thumb {
  border: 4px solid #fff3eb;
  border-radius: 999px;
  background: linear-gradient(180deg, #d7668a, #8fb9d6);
}

.cards {
  display: grid;
  gap: clamp(18px, 4vw, 34px);
  width: min(100%, 780px);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 42px) clamp(12px, 3vw, 24px);
}

.cards img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 22px 54px rgba(45, 55, 67, 0.16);
}

@media (max-width: 560px) {
  html {
    scrollbar-width: none;
  }

  body {
    background:
      radial-gradient(circle at 8% 4%, rgba(248, 213, 220, 0.78) 0 130px, transparent 132px),
      radial-gradient(circle at 94% 15%, rgba(159, 195, 221, 0.68) 0 118px, transparent 120px),
      radial-gradient(circle at 16% 72%, rgba(255, 227, 198, 0.76) 0 112px, transparent 114px),
      linear-gradient(135deg, #fffaf4 0%, #f9eee9 52%, #fff7ef 100%);
    background-attachment: fixed;
  }

  body::-webkit-scrollbar {
    display: none;
  }

  .cards {
    gap: 0;
    width: min(100%, 430px);
    padding: max(env(safe-area-inset-top), 14px) 14px max(env(safe-area-inset-bottom), 36px);
    perspective: 900px;
  }

  .cards img {
    position: sticky;
    top: max(env(safe-area-inset-top), 14px);
    width: 100%;
    max-width: 100%;
    margin-top: -18px;
    border-radius: 8px;
    box-shadow: 0 18px 38px rgba(45, 55, 67, 0.18);
    transform: translate3d(0, 0, 0) scale(0.992);
    transform-origin: center top;
  }

  .cards img:first-child {
    margin-top: 0;
  }

  .cards img:nth-child(1) {
    z-index: 1;
  }

  .cards img:nth-child(2) {
    z-index: 2;
    transform: translate3d(0, -2px, 0) rotate(-0.25deg) scale(0.994);
  }

  .cards img:nth-child(3) {
    z-index: 3;
    transform: translate3d(0, -4px, 0) rotate(0.22deg) scale(0.996);
  }

  .cards img:nth-child(4) {
    z-index: 4;
    transform: translate3d(0, -6px, 0) rotate(-0.18deg) scale(0.998);
  }

  .cards img:nth-child(5) {
    z-index: 5;
    transform: translate3d(0, -8px, 0);
  }
}

@media (min-width: 561px) and (max-width: 900px) {
  .cards {
    width: min(100%, 680px);
    padding: 22px 14px;
  }
}