@layer components {
  .page-footer {
    border-top: var(--border-width) solid var(--color-borders);
  }

  .page-footer__content {
    display: grid;
    grid-template-areas: "menus" "email" "social" "utility";

    @media screen and (min-width: 1024px), print {
      grid-template-columns: 2fr 1fr;
      grid-template-areas: "menus email" "menus social" "utility utility";
    }
  }
}