<footer class="siteFooter">
  <div class="container">
    <div class="siteFooter__content">
      <aside class="siteFooter__info">
        <a class="siteFooter__logo" href="">
          <svg viewBox="0 0 300 133" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="300" height="133" fill="currentColor" />
          </svg>
        </a>
        <div class="siteFooter__address">
          <div class="h5">Address</div>
          <address>
            123 West Main Street<br />
            Second Floor<br />
            Townsville, MA 01234
          </address>
          <a href="">Get Directions</a>
        </div>
        <div class="siteFooter__contact">
          <a href="tel:1234567890">(123) 546 - 7890</a><br />
          <a href="mailto:contact@companycorp.com">contact@companycorp.com</a>
        </div>
      </aside>
      <div class="siteFooter__navigation sitemap">
        <ul class="sitemap__list">
          <li class="sitemap__item">
            <div class="sitemap__heading">Link Heading</div>
            <ul class="sitemap__sublist">
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
            </ul>
          </li>
          <li class="sitemap__item">
            <div class="sitemap__heading">Link Heading</div>
            <ul class="sitemap__sublist">
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
            </ul>
          </li>
          <li class="sitemap__item">
            <div class="sitemap__heading">Link Heading</div>
            <ul class="sitemap__sublist">
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
            </ul>
          </li>
          <li class="sitemap__item">
            <div class="sitemap__heading">Link Heading</div>
            <ul class="sitemap__sublist">
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
              <li><a href="">Plain Text Link</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <nav class="siteFooter__social actions">
        <a class="button -square -ghost" href="#">
          <span class="srOnly">On Facebook</span>
          <svg class="button__icon -large"><use href="/main-icons-sprite.svg#facebook" /></svg>
        </a>
        <a class="button -square -ghost" href="#">
          <span class="srOnly">On Instagram</span>
          <svg class="button__icon -large"><use href="/main-icons-sprite.svg#instagram" /></svg>
        </a>
        <a class="button -square -ghost" href="#">
          <span class="srOnly">On LinkedIn</span>
          <svg class="button__icon -large"><use href="/main-icons-sprite.svg#linkedin" /></svg>
        </a>
        <a class="button -square -ghost" href="#">
          <span class="srOnly">On YouTube</span>
          <svg class="button__icon -large"><use href="/main-icons-sprite.svg#youtube" /></svg>
        </a>
      </nav>
      <nav class="siteFooter__utility">
        <span class="siteFooter__copyright">© 2025 CompanyCorp LLC</span>
        <a href="">Privacy Policy</a>
        <a href="">Terms of Service</a>
        <a href="">Cookie Policy</a>
      </nav>
    </div>
  </div>
</footer>

@use '@/core' as *;

.siteFooter {
  $b: &;

  &__content {
    display: grid;
    gap: var(--gap);
    grid: 'info' 'social' 'nav' 'utility';

    @include at(md) {
      grid:
        'logo address' auto
        'social contact'
        'nav nav'
        'utility utility'
        / auto 1fr;
    }

    @include at(lg) {
      grid:
        'info nav     nav   ' auto
        'info social  social' auto
        'info utility utility' auto
        / 1fr 1fr 1fr;
    }
  }

  &__logo {
    svg {
      width: min(100%, 301px);
      height: auto;
    }
  }

  &__info {
    grid-area: info;
    display: grid;
    gap: var(--root-gap);
    justify-items: start;

    @include at(md) {
      display: contents;
    }

    @include at(lg) {
      align-content: start;
      justify-items: start;
      display: grid;
      grid: auto / 1fr 1fr 1fr;

      > * {
        grid-column: span 2;
      }
    }
  }

  &__navigation {
    grid-area: nav;
  }

  &__social {
    grid-area: social;
    justify-content: space-between;

    @include at(lg) {
      justify-self: start;
    }
  }

  &__utility {
    grid-area: utility;
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem 2rem;
  }
}