.main-footer {
  container: footer / inline-size;

  footer-inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "logo . . . . . . menu-nav social-nav . contact-nav ."
      "text text text text text text text text text text text text";
    column-gap: var(--sp-20);
    padding-inline: var(--sp-30-16);
    padding-block: var(--sp-120-40) var(--sp-20);
    max-width: var(--sp-1440);
    margin-inline: auto;

    >svg {
      grid-area: logo;
      width: var(--sp-40-28);
      height: var(--sp-40-28);
    }

    nav {
      &:nth-of-type(1) {
        grid-area: menu-nav;
      }

      &:nth-of-type(2) {
        grid-area: social-nav;
      }

      &:nth-of-type(3) {
        grid-area: contact-nav;
      }

      h2 {
        margin-block-end: var(--sp-12);
      }

      a {
        text-decoration: none;
        color: var(--font);

        @media (hover: hover) {
          &:hover {
            text-decoration: underline;
          }
        }
      }

      ul {
        display: flex;
        flex-direction: column;
        row-gap: var(--sp-12);
      }
    }

    >p {
      grid-area: text;
      font-size: var(--special-h1-size);
      font-family: var(--f-r);
      letter-spacing: calc(var(--neg-4) * var(--special-h1-size));
      line-height: var(--lh-100);
      width: fit-content;
      margin-inline: auto;
      color: var(--font);
      margin-block-start: var(--sp-160-80);
    }

    @container (inline-size < 71.875rem) {
      grid-template-areas:
        "logo . . . . menu-nav menu-nav social-nav social-nav contact-nav contact-nav ."
        "text text text text text text text text text text text text";
    }

    @container (inline-size < 48.125rem) {
      grid-template-areas:
        "logo . . . menu-nav menu-nav social-nav social-nav contact-nav contact-nav . ."
        "text text text text text text text text text text text text";
    }

    @container (inline-size < 37.5rem) {
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas:
        "logo ."
        "menu-nav social-nav"
        "contact-nav contact-nav"
        "text text";

      nav {
        margin-block-start: var(--sp-40);
      }
    }
  }
}