.cards {
  width: 100%;
  min-height: 40%;
  min-width: 40%;
  margin: 50px 50px;
  background-color: white;
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
  font-family: sans-serif;
  font-size: 20px;
  color: #00000080;
  box-shadow: 0 5px 10px 0 #00000040, 0 15px 20px 0#00000020;
}


@keyframes scrollport {
  50% {
    transform: translate(-50%, calc(var(--y) - 250px)) scale(0.85) rotate(-5deg);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translate(-50%, calc(var(--y) - 15px)) scale(0.85);
    z-index: -1;
  }
}

@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";

.scrollport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  
  display: flex;
  gap: var(--size-10);
  align-items: start;
  padding: var(--size-10);
}

.scrollport > div {
  block-size: var(--size-15);
  aspect-ratio: var(--ratio-square);
  background-color: var(--surface-2);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-4);
}
/*# sourceMappingURL=test.css.map */