body,
html {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

.cards {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cards .card:nth-child(odd) {
  align-self: start;
}

.cards .card:nth-child(even) {
  align-self: flex-end;
}

.card {
  --card-hidden-x: -200px;
  --card-hidden-y: 0;

  width: 70vw;
  min-height: 70vh;
  background: linear-gradient(180deg, var(--orange), var(--green));
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-align: center;
  align-items: center;
  font-size: 1.15em;
  margin-bottom: 5vh;
  padding: 1vh 2vw;
  opacity: 1;
  position: relative;
  transition:
    opacity 850ms ease,
    transform 850ms ease;
  will-change: opacity, transform;
}

.cards > .card:nth-of-type(odd) {
  --card-hidden-x: -200px;
}

.cards > .card:nth-of-type(even) {
  --card-hidden-x: 200px;
}

.js-card-animation .cards > .card {
  opacity: 0;
  transform: translate(var(--card-hidden-x), var(--card-hidden-y));
}

.js-card-animation .cards > .card.visible {
  opacity: 1;
  transform: translate(0, 0);
}

.card img {
  height: 30vh;
  border-radius: 50%;
  box-shadow: var(--shadow);
}

#wonder-image {
  box-shadow: none;
}

.footer {
  bottom: 0;
}

@media (max-width: 1150px) {
  .cards {
    align-items: center;
  }

  .cards .card:nth-child(odd),
  .cards .card:nth-child(even) {
    align-self: center;
  }

  .cards > .card:nth-of-type(odd),
  .cards > .card:nth-of-type(even) {
    --card-hidden-x: 0;
    --card-hidden-y: 48px;
  }

  body {
    overflow-x: hidden;
    overflow-y: scroll;
  }
}

@media (max-width: 370px) {
  .card img {
    height: auto;
    width: 80%;
  }

  body {
    overflow-x: hidden;
    overflow-y: scroll;
  }
}

@media (min-width: 1151px) {
  body {
    overflow-x: hidden;
    overflow-y: scroll;
  }
}