@layer tenant {
  :root {
    --font-body: "GothamHTF", sans-serif;
    --font-header: "GothamHTF", sans-serif;
  }

  :where(.font-header) {
    font-weight: bold;
  }

  body {
    font-family: var(--font-body);
    font-weight: 300;
  }

  h1,
  h2,
  h3 {
    font-weight: bold;

    header & {
      color: hsl(var(--secondary));
    }
  }

  #primary-nav {
    display: grid;

    grid-template-areas:
    "logo cart-icon"
    "links links";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    @media (min-width: 48rem) {
      grid-template-areas:
      "logo links cart-icon";
      grid-template-columns: repeat(3, auto);
      grid-template-rows: 1fr;

      justify-content: space-between;
    }

    .primary-nav__links {
      grid-area: links;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      >a,
      >div {
        flex: 1;
        display: flex;
        min-width: max-content;

        align-items: center;
        justify-content: center;

        &:first-child {
          justify-content: flex-start;
        }

        &:last-child {
          justify-content: flex-end;
        }
      }
    }

    #primary-footer {
      h2 {
        font-weight: normal;
        color: inherit;
      }
    }
  }
}