<footer class="siteFooter 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="#8000FF"/>
        </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>
</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;
  }
}