@layer components {
  .page-footer {
    margin-top: var(--content-vertical-spacing);
  }

  .page-footer__content {
    display: grid;
    grid-template-areas: "email" "menus" "social" "utility";
    gap: var(--spacing-unit-xl);
    border-top: 1px solid var(--color-overlay-d01);
    padding: var(--content-vertical-spacing) 0 var(--spacing-unit-xl);

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