.main-footer {
  container: footer / inline-size;
  padding-inline: var(--sp-30-16);

  footer-inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: 
      "award award award award award nav nav address address address button-group button-group"
      "statement statement statement statement . newsletter newsletter newsletter newsletter newsletter newsletter newsletter"
      "logo logo . . . bottom bottom bottom bottom bottom . .";
    column-gap: var(--sp-20);
    row-gap: var(--sp-60-40);
    max-width: var(--sp-1440);
    margin-inline: auto;
    padding-block: var(--sp-80-40) var(--sp-40);

    img {
      grid-area: award;
      max-width: var(--sp-96);
      padding: var(--sp-8);
      border: var(--border);
      border-radius: var(--sp-8);
    }

    .nav {
      grid-area: nav;
      
      ul {
        display: flex;
        flex-direction: column;
        gap: var(--sp-12);
        
        a {
          text-decoration: none;
          color: var(--black-tint-14);

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

    address {
      grid-area: address;

      info-type {
        display: none;
      }
    }

    button-group {
      grid-area: button-group;
      display: flex;
      flex-direction: column;
      align-items: end;
      gap: var(--sp-8);
    }

    p {
      grid-area: statement;
    }

    newsletter-container {
      display: block;
      grid-area: newsletter;

      p {
        margin-block-end: var(--sp-16);
      }

      iframe {
        width: 100%;
        height: 275px;
      }
    }

    .logo {
      grid-area: logo;
    }

    footer-bottom {
      grid-area: bottom;
      display: flex;
      flex-direction: column;
      gap: var(--sp-20);

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

          svg {
            transition: transform var(--anime-time) var(--anime-func);
          }

          @media (hover: hover) {
            a:hover {
              svg {
                transform: scale(1.1);
              }
            }
          }
        }
      }
    }

    @container (inline-size < 68.75rem) {
      grid-template-areas: 
        "award award award award award award award award award award award award"
        "nav nav nav nav address address address address button-group button-group button-group button-group"
        "statement statement statement statement . newsletter newsletter newsletter newsletter newsletter newsletter newsletter"
        "logo logo . . . bottom bottom bottom bottom bottom . .";
    }

    @container (inline-size < 46.875rem) {
      grid-template-areas: 
        "award award award award award award award award award award award award"
        "nav nav nav nav address address address address button-group button-group button-group button-group"
        "statement statement statement statement statement statement statement statement statement statement statement statement"
        "newsletter newsletter newsletter newsletter newsletter newsletter newsletter newsletter newsletter newsletter newsletter newsletter"
        "logo logo . . . bottom bottom bottom bottom bottom . .";
    }

    @container (inline-size < 34.375rem) {
      grid-template-columns: 1fr;
      grid-template-areas: 
        "award"
        "nav"
        "address"
        "button-group"
        "statement"
        "newsletter"
        "logo"
        "bottom";
      row-gap: var(--sp-20);

      button-group {
        align-items: start;
      }

      p,.logo {
        margin-block-start: var(--sp-20);
      }

      footer-bottom {
        gap: var(--sp-8);
      }
    }
  }
}