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

:root {
  --ff-heading: "Staatliches", cursive;
  --ff-texting: "Palanquin", sans-serif;
  --ff-page-text: "Roboto", sans-serif;
  --ff-footer: "Open Sans", sans-serif;

  --hue: 218;
  --hd-primary: hsl(var(--hue), 17%, 62%);
  --bg-primary: hsl(var(--hue), 100%, 97%);
  --box-bg: hsl(var(--hue), 91%, 96%);
  --box-text: hsl(var(--hue), 17%, 35%);

  --fc-secondary: hsl(var(--hue), 0%, 100%);

  --fc-shadow: hsla(var(--hue), 0%, 0%, 0.25);

  font-size: 62.5%;
  --fs-heading: 4rem;
  --fs-text: 1.4rem;
}

.page {
  margin: 0 auto;
}

header {
  background-color: var(--hd-primary);
  display: grid;
  place-items: center;

  animation: left-right 1000ms;
}

.title {
  background-color: #cbc0d3;
  margin-bottom: 2.9rem;
  padding: 0.8rem;
  width: 100%;
  text-align: center;
}

h1 {
  font-size: 4rem;
  color: var(--fc-secondary);
  font-weight: 400;
  text-shadow: 0px 2px 2px var(--fc-shadow);
}

h1,
span {
  font-family: var(--ff-heading);
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  line-height: 3.4rem;
}

.text-desktop {
  display: none;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;

  font-family: var(--ff-texting);
  padding: 1.8rem 3.2rem 5rem;

  background-color: var(--bg-primary);

  animation: right-left 1500ms;
}

.text-mobile {
  font-family: var(--ff-texting);
  text-align: center;
  width: 31.5rem;
  font-weight: normal;
  font-size: var(--fs-text);
  line-height: 2.2rem;
  -webkit-font-smoothing: antialiased;
}

.cards {
  margin-top: 5rem;

  display: grid;
  gap: 3.2rem;
}

.cards .card {
  position: relative;
  width: 32rem;
  height: fit-content;
}

.cards div:nth-child(5) {
  display: none;
}
.cards div:nth-child(6) {
  display: none;
}

.cards .card span {
  font-size: 2rem;
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  color: var(--box-text);
  background-color: var(--box-bg);
  border-radius: 2rem;
  width: 11.2rem;
  text-align: center;
  padding: 0 2.4rem;

  text-transform: uppercase;
  letter-spacing: 0.05rem;

  animation: downtop 2000ms;
}

.cards .card img {
  width: 100%;
}

.cards .card img:hover {
  transform: scale(1.1);
  opacity: 0.7;
}

footer {
  display: none;
}

@media (min-width: 900px) {
  .page {
    display: grid;
    grid-template-columns: 1fr 3fr;
  }

  .header {
    margin: 0;
    padding: 0;
  }

  .text-desktop {
    display: block;
    text-align: center;
    font-family: var(--ff-page-text);
    padding: 0rem 5.2rem;

    font-size: 2rem;

    margin-top: -10rem;

    color: var(--fc-secondary);
  }

  main {
    margin: 0;
    padding: 0;
  }

  .text-mobile {
    display: none;
  }

  .cards {
    display: grid;
    grid-template-areas:
      "A B C"
      "D B E"
      "D F E";
  }

  .cards div:nth-child(5),
  .cards div:nth-child(6) {
    display: block;
  }

  .cards .card span {
    display: none;
  }

  .cards div:nth-child(1) {
    grid-area: A;
  }

  .cards div:nth-child(2) {
    grid-area: B;
  }

  .cards div:nth-child(3) {
    grid-area: C;
  }

  .cards div:nth-child(4) {
    grid-area: D;
  }
  .cards div:nth-child(5) {
    grid-area: F;
  }
  .cards div:nth-child(6) {
    grid-area: E;
  }

  footer {
    display: block;
    margin-top: 2rem;
    margin-bottom: 6rem;
    font-size: 1.4rem;
  }

  a {
    font-family: var(--ff-footer);
    font-weight: bold;

    text-decoration: none;
    color: #4a4e69;
  }
}

@keyframes left-right {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: rotateX(0px);
  }
}

@keyframes right-left {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: rotateX(0px);
  }
}

@keyframes downtop {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: rotateY(0px);
  }
}