.footer {
  background-color: var(--black);
  padding: 2.25rem 0 3.19rem;

  display: flex;
  flex-direction: column;
  gap: 2.56rem;

  .footer--nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style: none;
    flex-wrap: wrap;
  }

  .footer--nav.level-1 {
    gap: 0.88rem;

    .component-menu-item {
      display: flex;
      a {
        img {
          width: 2.38rem;
          height: 2.38rem;
        }
      }
    }
  }

  .footer--nav.level-2 {
    gap: 0.25rem;

    .component-menu-item {
      display: flex;
      a {
        width: 100%;
        color: var(--white);
        text-align: center;
        font-family: var(--font-family);
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 900;
        line-height: 1.78563rem; /* 142.85% */
        text-transform: uppercase;
        text-align: center;
      }

      a::after {
        content: '-';
      }
    }
    .component-menu-item:last-of-type {
      a::after {
        content: none;
      }
    }
  }
}

@media screen and (min-width: 64rem) /* 1024px */ {
  .footer {
    padding: 2.5rem 0 1.25rem;
    gap: 3rem;
    .footer--nav.level-2 {
      max-width: 70rem;
      margin: 0 auto;
      column-gap: 2rem;
      row-gap: 0;

      .component-menu-item {
        a {
          position: relative;
        }

        a::after {
          position: absolute;
          right: -1.25rem;
        }
      }

      .component-menu-item:hover {
        a {
          color: var(--primary);
        }
        a::after {
          color: var(--white);
        }
      }
    }
  }
}