.footer {
  display: grid;
  grid-template-columns:
    minmax(var(--grid-padding), 1fr) repeat(
      var(--grid-columns),
      minmax(0, calc(var(--max-content-width) / var(--grid-columns)))
    )
    minmax(var(--grid-padding), 1fr);
}

.footer > * {
  grid-column: 2 / -2;
}

.footer__meta {
  margin-block-start: 4rem;
}

.footer__copyright {
  margin-block-start: 4.625rem;
}

.footer--dark {
  padding-block: 3rem;
  color: white;
  background-color: var(--clr-secondary-dark);
}

.footer .component {
  padding-block: 1.5rem;
}

.footer__search {
  margin-block-start: 2rem;
}

.footer .nav__action--switch {
  justify-content: center;
}

.footer__search .nav__search {
  max-width: 100%;
}

.footer__search .nav__search form {
  width: 100%;
}

.footer__meta .nav__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.footer__meta .nav__meta > a {
  font-size: 1rem;
  text-transform: uppercase;
}

.footer__meta .nav__meta > * + * {
  margin-block-start: unset;
}

.footer__copyright {
  font-size: 1rem;
}

.footer__social {
  margin-block-start: 4rem;
}

.nav__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.nav__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--clr-secondary);
  background: var(--clr-white);
  transition:
    color 400ms ease,
    background 400ms ease;
}

.nav__social-link:hover,
.nav__social-link:focus {
  color: var(--clr-white);
  background: var(--clr-secondary);
}

.nav__social-link > svg {
  width: 1.25rem;
  height: 1.25rem;
}

.nav__social-link--11 > svg {
  width: 1.75rem;
  height: 1.75rem;
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
  .footer--dark {
    padding-block: 5rem;
  }

  .footer__search {
    grid-column: 2 / 7;
    grid-row: 1 / span 1;
    margin-block-start: unset;
  }

  .footer .nav__action--switch {
    grid-row: 1;
    grid-column: 12 / -2;
    justify-content: flex-start;
  }

  .nav__social {
    justify-content: flex-start;
  }
}