@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  figure {
    margin: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 500;
  }

  img {
    max-width: 100%;
    display: block;
  }
}

@layer base {
  html {
    font-family: "Roboto Slab", serif;
    color: var(--color-dark-ink);
    line-height: 1.6;
  }

  body {
    font-size: var(--fs-reg);
    background-color: var(--color-light-panel);
  }

  footer {
    display: flex;
    justify-content: center;
    background-color: var(--color-accent-yellow);
    color: var(--color-dark-ink);
    padding: 2rem;
  }

  .wrap {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 1rem;
  }

  h1,
  h2 {
    font-family: "Bangers", cursive;
  }

  h1 {
    font-size: var(--fs-xl);
    color: var(--color-primary-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
  }

  h2 {
    color: var(--color-secondary-blue);
    letter-spacing: 1px;
    font-size: var(--fs-md);
    margin-bottom: 0.5rem;
  }

  a {
    color: var(--color-secondary-blue);
    text-decoration: none;
    transition: color 0.3s ease;
  }
}

@layer layout {
  /* The Container */
  .container {
    margin-block: 2rem;
  }
  /* The Grid! */
  .grid {
    display: grid;
    grid-template-areas:
      "one"
      "two"
      "three"
      "four"
      "five"
      "six"
      "seven"
      "eight";
    gap: var(--gap);
    margin-inline: auto;
    max-inline-size: 100%;

    /* Using range syntax for media queries */
    @media (width > 960px) {
      grid-template-areas:
        "one two two three"
        "one five six three"
        "four five six three"
        "four seven eight eight";
    }
  }

  .grid-item {
    display: flex;
    flex-direction: column;

    background-color: var(--color-card-yellow-tint);
    border: 4px solid var(--color-dark-ink);
    border-radius: var(--grid-item-border-radius, 10px);

    overflow: hidden;

    img {
      max-width: var(--grid-item-image-width, 100%);
      width: var(--grid-item-image-width, 100%);
    }

    &.item1 {
      grid-area: one;
    }
    &.item2 {
      grid-area: two;
    }
    &.item3 {
      grid-area: three;
    }
    &.item4 {
      grid-area: four;
    }
    &.item5 {
      grid-area: five;
    }
    &.item6 {
      grid-area: six;
    }
    &.item7 {
      grid-area: seven;
    }
    &.item8 {
      grid-area: eight;
    }

    &.grid-item-horizontal {
      @media (width > 960px) {
        display: flex;
        flex-direction: row;
        gap: var(--gap);
        --grid-item-image-width: 50%;
      }
    }
  }

  .grid-item-content {
    flex-grow: 1;
    padding: var(--grid-item-padding, 1rem);
  }

  /* The Sub-Grid! */
  .subgrid {
    display: grid;
    gap: var(--gap);

    @media (width > 960px) {
      grid-template-columns: minmax(6ch, 20ch) 1fr minmax(6ch, 20ch) 1fr;
    }
  }

  .subgrid-item {
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
    grid-template-rows: min-content 1fr;
    gap: var(--gap);
    background-color: var(--color-card-blue-tint);
    border: 3px solid var(--color-dark-ink);
    border-radius: 8px;

    h2 {
      grid-column: 2;
      padding-top: 1rem;
      padding-right: 1em;
      font-size: 1.75rem;
      line-height: 1;
    }

    p {
      grid-column: 2;
      padding-bottom: 1rem;
      padding-right: 1em;
    }
  }

  .subgrid-item img {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@layer utilities {
  .headify {
    color: var(--color-primary-red);
    text-align: center;
    font-size: var(--fs-lg);
    margin-bottom: 0;
  }
}