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

  at-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    column-gap: var(--sp-20);
    padding-block-end: var(--sp-20);

    .footer-logo {
      margin-block-end: var(--sp-64-48);
    }

    h2 {
      margin-block-end: var(--sp-24);
      padding-block-end: var(--sp-8);
      border-block-end: var(--sp-1) solid var(--white-shade-28);
    }

    a:hover {
      text-decoration: underline;
    }

    nav ul {
      display: flex;
      flex-direction: column;
      gap: var(--sp-16);
    }

    .social, address {
      margin-block-start: var(--sp-120-48);
    }

    .social {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--sp-24);

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

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

    address {
      grid-column: span 2;
      font-style: normal;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--sp-20);

      span, a {
        display: block;
      }

      a {
        margin-block-start: var(--sp-4);
        color: var(--white);
        text-decoration: none;
      }
    }

    .big-logo, copyright-info {
      grid-column: span 3;
    }

    .big-logo {
      font-family: var(--f-m);
      font-size: clamp(1rem, 24vw, 22.188rem);
      line-height: var(--lh-100);
      margin-block: var(--sp-120-48);
    }

    copyright-info {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      a {
        color: #E0D7C5;
      }
    }

    @container (inline-size < 50rem) {
      grid-template-columns: 1fr 1fr;

      .footer-logo, .social, .big-logo, copyright-info {
        grid-column: span 2;
      }

      .big-logo {
        font-size: 23.5vw;
      }
    }

    @container (inline-size < 28.125rem) {
      grid-template-columns: 1fr;

      .footer-logo, .social, address, .big-logo, copyright-info {
        grid-column: span 1;
      }

      .main-link {
        margin-block-end: var(--sp-32);
      }

      nav {
        margin-block-end: var(--sp-64-48);
      }

      .social {
        margin-block-start: 0;
      }

      address {
        grid-template-columns: 1fr;
      }
    }
  }
}