Footer Example

<footer class="footer">
  <div class="footer-container">
    <div class="footer-logo">
      <app-logo />
    </div>
    <ul class="footer-nav">
      <li class="footer-nav-list">
        <a class="footer-nav-link" href="">{{ 'FOOTER.TERMS' | transloco }}</a>
      </li>
      <li class="footer-nav-list">
        <a class="footer-nav-link" href="">{{ 'FOOTER.PRIVACY' | transloco }}</a>
      </li>
      <li class="footer-nav-list">
        <a class="footer-nav-link" href="">{{ 'FOOTER.IMPRESSUM' | transloco }}</a>
      </li>
    </ul>
  </div>
</footer>

@use 'shared' as *;

:host {
  display: block;
}

.footer{
  background: var(--color-primary-950);
  margin-top: 48px;
  padding: 32px 24px;
  @include media-breakpoint-up(lg){
    padding: 48px 24px;
  }
  &-container{
    max-width: 1110px;
    width: 100%;
    margin: auto;
    @include media-breakpoint-up(lg){
      display: flex;
      justify-content: flex-start;
      gap: 62px;
    }
  }
  &-logo{
    margin-bottom: 16px;
    @include media-breakpoint-up(lg){
      margin: 0;
    }
  }
  &-nav{
    display: flex;
    flex-direction: column;
    gap: 16px;
    @include media-breakpoint-up(lg){
      align-items: center;
      flex-direction: row
    }
    &-list{
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 120%; 
    }
    &-link{
      color: var(--color-grey-400);
      transition: .3s;
      display: block;
      &:hover{
        color: var(--color-white);
      }
    }
  }
}