<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">
            <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">
            <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">
            <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">
            <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 "@imarc/pronto/resources/styles/imported" 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: .5rem 2rem;
  }
}