Global Footer

<div class="footer">
    <div class="footer__top">
        <div class="footer__logo-main">
            <img src="/images/logo-paramount.png" alt="Paramount" width="169" height="61" />
        </div>
        <ul class="footer__logo-list">
            <li><img src="/images/logo-cbs.svg" alt="" /></li>
            <li><img src="/images/logo-showtime.svg" alt="" /></li>
            <li><img src="/images/logo-paramount.svg" alt="" /></li>
            <li><img src="/images/logo-nickelodean.svg" alt="" /></li>
            <li><img src="/images/logo-mtv.svg" alt="" /></li>
            <li><img src="/images/logo-comedycentral.svg" alt="" /></li>
            <li><img src="/images/logo-bet.svg" alt="" /></li>
            <li><img src="/images/logo-paramountplus.svg" alt="" /></li>
            <li><img src="/images/logo-plutotv.svg" alt="" /></li>
            <li><img src="/images/logo-simonschuster.svg" alt="" /></li>
            <li><img src="/images/logo-channelfive.svg" alt="" /></li>
            <li><img src="/images/logo-networkten.svg" alt="" /></li>
            <li><img src="/images/logo-telefe.svg" alt="" /></li>
            <li><img src="/images/logo-colors.svg" alt="" /></li>
        </ul>
    </div>
    <div class="footer__bottom">
        <div class="footer__social">
            <ul class="list-unstyled list-inline">
                <li>
                    <a href="#">
                        <i class="fa fa-facebook-official"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-twitter"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-linkedin"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-youtube-play"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-instagram"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="footer__stock">
            <div class="footer__stock-group">
                <div>
                    <span class="footer__stock-name">PARA</span>
                    <span class="footer__stock-cost"> $40.51 </span>
                    <div class="footer__stock-age">Date as of Sep 9, 2021 2:02 PM EDT</div>
                </div>
                <div class="">
                    <div class="footer__stock-desc">
                        Class B<br />
                        common stock
                    </div>
                    <span class="footer__stock-difference">
                        <!-- Replace class to 'is-negative' for different display -->
                        <span class="footer__stock-icon is-positive"></span>
                        .52
                    </span>
                    <span class="footer__stock-percent">1.30%</span>
                </div>
            </div>
        </div>
        <ul class="footer__link-list">
            <li>
                <a href="#">Global Business Conduct Statement</a>
            </li>
            <li>
                <a href="#">Help & Feedback</a>
            </li>
        </ul>
        <div class="footer__copyright">
            <span>Copyright &copy; 2022 Paramount – All Rights Reserved.</span>
        </div>
    </div>
</div>

.footer {
  color: $color-base-white;
  background-color: $color-base-blue;
  padding-bottom: 4rem;
}

.footer__top {
  padding: 4.8rem 2.4rem 2.4rem;
}

.footer__logo-main {
  text-align: center;
}

.footer__logo-list {
  display: none;

  @media (min-width: $breakpoint-desktop) {
    display: flex;
    max-width: 1170px;
    list-style: none;
    padding: 0 1.2rem;
    margin: 3.2rem auto 1.2rem;
    justify-content: space-between;
  }
}

.footer__bottom {
  max-width: 1170px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;

  @media (min-width: $breakpoint-desktop) {
    grid-template-columns: 1fr 1fr;
  }
}

.footer__social {
  grid-row-start: 1;
  grid-column-start: 1;
  text-align: center;

  @media (min-width: $breakpoint-desktop) {
    text-align: left;
    align-self: flex-end;
  }

  a {
    @include typeSubheader;
    color: $color-base-white;

    &:hover {
      color: $color-blue-light;
    }
  }
}

.footer__stock {
  justify-self: center;

  @media (min-width: $breakpoint-desktop) {
    justify-self: flex-end;
  }
}

.footer__stock-group {
  display: flex;
  align-items: center;
  padding: 1.2rem;

  > * {
    padding: 0.4rem 0.8rem;
  }

  > *:first-child() {
    text-align: right;
  }
}

.footer__stock-name {
  @include typeHeadline(true);
}

.footer__stock-cost {
  @include typeHeadline(true);
  color: $color-blue-light;
}

.footer__stock-desc {
  @include typeSmall;
}

.footer__stock-age {
  @include typeSmall;
  padding: 0.4rem;
}

.footer__stock-icon {
  display: inline-block;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 10px 5px 10px 5px;
  border-color: transparent;

  &.is-positive {
    border-color: transparent transparent $color-green-medium;
  }

  &.is-negative {
    border-color: $color-magenta-medium transparent transparent;
    transform: translateY(50%);
  }
}

.footer__stock-difference {
  padding: 0 0.4rem;
}

.footer__link-list {
  grid-row-start: 2;
  grid-column-start: 1;
  padding-left: 2.4rem;
  margin: 0 0 0 -0.8rem;
  list-style: none;

  @media (min-width: $breakpoint-desktop) {
    padding-left: 0;

    > li {
      display: inline-block;
    }
  }

  a {
    @include typeCaption(true);
    display: inline-block;
    padding: 0.8rem;
    color: $color-base-white;
  }
}

.footer__copyright {
  text-align: center;
  padding: 1.6rem;

  @media (min-width: $breakpoint-desktop) {
    padding: 0;
    text-align: right;
  }
}