/**************************
* MARK: Specifieke styling eerste pagina
**************************/

/**************************
* MARK: Main
**************************/

main {
  padding: var(--whitespace);
  max-width: 75rem;
  overflow: clip;
  margin-inline: auto;

  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: var(--whitespace);

  grid-template-areas:
    ".      subkop .     "
    "me     text   text "
    "muziek muziek muziek"
    "films  films  films "
    "games  games  games "
    "boeken boeken boeken";

  @media (width > 40em) {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "subkop subkop subkop subkop"
      "me     text   text   .     "
      "muziek muziek films  films "
      "games  games  boeken boeken";
  }
  p {
    font-size: var(--step-1);
  }

  h2 {
    font-size: var(--step-4);
    grid-area: subkop;
    margin: 0;
    text-align: center;
  }

  p,
  ol {
    font-family: "written";
  }
}

main > a:nth-of-type(1) {
  grid-area: me;
  justify-self: center;
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.3));

  img {
    width: min(100%, 10rem);
    transition: 0.1s;

    &:hover {
      transform: scale(0.8);
    }
  }
}

/* bron: Maja */
main p:nth-of-type(1) {
  font-family: "written";
  grid-area: text;
  text-align: left;
}

/* alle hartjes */
main > a:nth-of-type(n + 2) {
  max-width: 24em;
  justify-self: center;
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.3));

  img {
    transition: 0.1s;

    &:hover {
      transform: scale(0.8);
    }
  }

  h3 {
    font-family: "written";
    font-size: var(--step-2);
  }

  h4 {
    font-family: "written";
    font-size: var(--step-0);
  }
}

/* de oneven hartjes */
main > a:nth-of-type(2n + 3) {
  rotate: 30deg;
}

/* de even hartjes */
main > a:nth-of-type(2n + 2) {
  rotate: -30deg;
}

/* de plek voor elk hartje */
main > a:nth-of-type(2) {
  grid-area: muziek;
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/transform-function/scale */

main > a:nth-of-type(3) {
  grid-area: films;
}

main > a:nth-of-type(4) {
  grid-area: games;
}

main > a:nth-of-type(5) {
  grid-area: boeken;
}