@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 500vh;
  font-family: "Instrument Serif";
}

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

section {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: blue;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  font-size: 5vw;
  font-weight: lighter;
  line-height: 100%;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 450px;
  perspective: 1000px;
}

.card p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 24px;
  font-weight: 500;
}

.card-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  animation: floating 3s infinite ease-in-out;
}

#card-1 .card-wrapper {
  animation-delay: 0;
}

#card-2 .card-wrapper {
  animation-delay: 0.2s;
}

#card-3 .card-wrapper {
  animation-delay: 0.4s;
}

#card-4 .card-wrapper {
  animation-delay: 0.6s;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0.8em;
  overflow: hidden;
}

.flip-card-back {
  padding: 1em;
  background-color: #fff;
  transform: rotateY(180deg);
}

@keyframes floating {
  0% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, -60%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

/* lenis */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}