.menu.menu--footer {
  --color-link: var(--color-text);
  flex-direction: column;
  align-items: flex-start;
}

.menu--footer {
  --color-link-focus: var(--color-text);
  gap: calc(2 * var(--spacing));
}

.menu--footer .menu-item {
  margin-bottom: 1rem;
}

.menu--footer .menu-item:last-child {
  margin-bottom: 0;
}

.menu--footer a {
  display: inline-flex;
  align-items: center;
}

.menu--footer a {
  padding-right: 1.25rem;
  background-size: .75rem auto;
  background-position: right center;
  background-repeat: no-repeat;
  background-image: none;
}

.menu--footer a:hover,
.menu--footer a:focus,
.menu--footer a:active,
.menu--footer a.is-active,
.menu--footer .menu-item--active-trail > a {
  background-image: url(arrow-right.svg);
  text-decoration: none;
}

.menu--footer a:hover .menu-item__title,
.menu--footer a:focus .menu-item__title,
.menu--footer a:active .menu-item__title,
.menu--footer a.is-active .menu-item__title,
.menu--footer .menu-item--active-trail > a .menu-item__title {
  border-bottom: 1px solid;
}

@media all and (min-width: 768px) {
  .menu.menu--footer {
    --rows: 4;
    height: calc(var(--rows) * 3 * var(--spacing) - calc(2 * var(--spacing)));
  }

  .menu--footer .menu-item {
    width: calc(50% - var(--spacing));
    height: var(--spacing);
    margin-bottom: 0;
  }



  .menu.menu--social-media {
    gap: 2rem;
    justify-content: flex-start;
  }

  .menu.menu--footer li:nth-child(4n+4) {
    margin-bottom: 0;
  }
}