footer {
  --footer-copyright-letter-spacing: -0.015rem;

  background: var(--color-neutral-dark-cream);
  color: var(--color-spinach);
  font-size: var(--text-body-md-size);
  margin: 0 auto;
  padding: 0 var(--spacing-3) var(--spacing-5);
}

.footer {
  display: grid;
  max-width: 1264px;
  margin: 0 auto;
}

.footer-legal {
  display: flex;
  flex-direction: column;
  order: 4;
  padding-top: var(--spacing-5);
}

.footer-legal > div:first-child {
  order: 2;
}

.footer-legal p {
  margin: 0;
}

.footer-legal picture img {
  width: 58px;
  height: auto;
  margin-top: var(--spacing-10);
}

.footer-legal div:last-child p {
  font-family: var(--text-app-h1-font);
  font-size: var(--text-body-sm-size);
  font-style: normal;
  font-weight: var(--text-body-sm-weight);
  line-height: 1.3;
  margin: var(--spacing-5) 0 0;
  color: var(--color-neutral-light-spinach);
  letter-spacing: var(--footer-copyright-letter-spacing);
}

.footer-social {
  order: 3;
}

@media (width >= 1024px) {
  footer {
    padding: 0;
  }

  .footer {
    grid-template-columns: 1.5fr 0.5fr;
    row-gap: var(--spacing-7);
    justify-content: space-between;
    padding: var(--spacing-15) var(--spacing-15) var(--spacing-17-5);
  }

  .footer-nav {
    display: flex;
    gap: var(--spacing-25);
    padding-bottom: var(--spacing-10);
    border-bottom: 1px solid var(--color-neutral-lightest-spinach);
  }

  /* Align first link across columns when a column has no heading. */
  .footer-nav .links-column:not(:has(.footer-heading)) {
    padding-top: calc(var(--text-h6-size) * var(--text-h6-line-height));
  }

  /* `.links-column.vertical` adds a `var(--spacing-10)` flex gap between
   * `.footer-heading` and `.footer-links` on desktop — reserve that gap too
   * so vertical no-heading columns stay aligned with their headed siblings. */
  .footer-nav .links-column.vertical:not(:has(.footer-heading)) {
    padding-top: calc(var(--text-h6-size) * var(--text-h6-line-height) + var(--spacing-10));
  }

  .footer-legal {
    padding: 0;
  }

  .footer-legal,
  .footer-legal div:first-child {
    order: unset;
  }

  .footer-legal picture img {
    width: 95px;
    margin: 0 0 var(--spacing-15);
  }

  .footer-legal picture {
    grid-column: 1;
  }

  .footer-legal .links-column.horizontal {
    grid-column: 2;
  }

  .footer-legal p:last-child {
    grid-column: 2;
  }

  .footer-social {
    display: flex;
    justify-content: start;
    align-items: start;
    order: unset;
  }
}