nav {
  background-color: var(--clr-scndry-green-0);
}

@media (min-width: 1280px) {
  .h-xl {
    font-size: 12.25rem;
  }

  .page-title svg {
    top: 5.5rem;
    bottom: auto;
  }
}

@media (max-width: 800px) {
  .h-xl {
    font-size: clamp(3.25rem, -0.5rem + 20vw, 4rem);
  }

  .page-title svg {
    top: 1.5rem;
    bottom: auto;
  }
}

main {
  display: grid;
  grid-template: repeat(3, auto) / repeat(12, 1fr);
  padding: 2.5rem 1rem 4rem;
  gap: 0 1rem;
}

.overview {
  display: grid;
  grid-column: span 12;
  grid-template-columns: subgrid;
}

.summary {
  grid-area: 1 / 1 / 2 / 5;
  margin-top: 1.75rem;
}

.meta {
  display: flex;
  flex-direction: column;
  grid-area: 1 / 7 / 2 / 9;
  gap: 2rem;

  & dt {
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--clr-txt-dark-grey);
  }

  & .date {
    white-space: nowrap;
  }
}

.table-of-contents {
  grid-area: 1 / 10 / 2 / 13;
  display: flex;
  flex-direction: column;
  counter-reset: toc-count;

  & h2 {
    margin-left: 2.25rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    color: var(--clr-txt-dark-grey);
  }

  & ol {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  & a {
    display: flex;
    gap: 0.25rem;
    counter-increment: toc-count;
    padding: 0.0625rem 0.375rem 0 0;

    & .counter {
      display: flex;
      justify-content: end;
      width: 1.75rem;
      color: var(--clr-txt-dark-grey);

      &::before {
        content: "0" counter(toc-count) " /";
        white-space: nowrap;
      }
    }
  }
}

.divider {
  grid-area: 2 / 1 / 3 / 13;
  border-bottom: 2px solid var(--clr-txt-light-grey);
  margin: 2.5rem 0;
}

article {
  grid-area: 3 / 2 / 4 / 12;
  grid-template-columns: subgrid;
  display: grid;
  counter-reset: chapter-count;

  & p,
  ul,
  h2,
  h3,
  .button {
    grid-column: 4 / 8;
  }

  img {
    width: 100%;
  }

  & .image-no-gap {
    display: flex;
    flex-direction: column;
  }

  & .image-gap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  & .image-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  & .image-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .image-width-normal {
    grid-column: 4 / 8;
  }

  & .image-width-medium {
    grid-column: 3 / 9;
  }

  & .image-width-full {
    grid-column: span 10;
  }

  & .image-margin {
    margin: 2.5rem 0;
  }

  & .list-bullet li {
    margin-left: 1rem;
    list-style-type: disc;
  }

  & h2 {
    margin: 4rem 0 2.5rem;
    scroll-margin-top: 4rem;
    display: flex;
    gap: 0.25rem;
    counter-increment: chapter-count;

    & .counter:before {
      content: "0" counter(chapter-count) " /";
      white-space: nowrap;
    }
  }

  & h3 {
    margin: 2.5rem 0 1.5rem;
  }

  & .button {
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: start;

    & a {
      padding: 0.375rem;
      background-color: var(--clr-accnt-pink-0);

      &::after {
        display: none;
      }
    }
  }

  & .inline-button {
    display: inline-flex;
    align-items: start;
  }
}

@media (max-width: 1280px) {
  .overview {
    display: flex;
    flex-direction: column;
  }

  .summary {
    margin: 0 0 2.5rem;
  }

  .meta {
    margin-bottom: 2rem;
  }

  .table-of-contents h2 {
    margin-left: 0;
  }

  article {
    grid-area: 3 / 3 / 4 / 11;
    display: flex;
    flex-direction: column;
  }

  article .image-grid-2 {
    display: flex;
    flex-direction: column;
  }

  article .image-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  main {
    display: flex;
    flex-direction: column;
  }
}