@layer components {
  .site-footer { background: var(--color-light-gray); margin-top: var(--space-l); padding: 2.5rem var(--page-gutter) 1.25rem; font-size: var(--text-small); }
  .site-footer__inner { width: min(100%, 75.25rem); margin-inline: auto; }
  .site-footer__main { display: grid; grid-template-columns: 12.1875rem minmax(16rem, 26.625rem) minmax(16rem, 26.625rem); gap: 2.5rem; align-items: center; justify-content: center; }
  .site-footer__logo { display: block; width: 9.9375rem; height: 9.9375rem; }
  .site-footer__logo img { width: 100%; height: 100%; object-fit: contain; }
  .site-footer__identity p { margin: 0; }
  .site-footer__menu, .site-footer__legal-menu { margin: 0; padding: 0; list-style: none; }
  .site-footer__menu { display: flex; flex-direction: column; gap: 0.6875rem; }
  .site-footer__menu a, .site-footer__legal-menu a { text-decoration: none; }
  .site-footer__menu a:hover, .site-footer__legal-menu a:hover { text-decoration: underline; }
  .site-footer__bottom { display: flex; justify-content: center; gap: 6.1875rem; align-items: center; margin-top: 1.375rem; padding-top: 1.25rem; border-top: 1px solid #d9d9d9; }
  .site-footer__credit { margin: 0; font-size: var(--text-caption); }
  .site-footer__legal-menu { display: flex; gap: 0.45em; }
  .site-footer__legal-menu li:not(:last-child)::after { content: " · "; }
}

@media (max-width: 64rem) {
  .site-footer { padding-inline: var(--page-gutter); }
  .site-footer__main { grid-template-columns: 8rem 1fr; gap: var(--space-m); justify-content: start; }
  .site-footer__logo { width: 8rem; height: 8rem; }
  .site-footer__navigation { grid-column: 1 / -1; }
  .site-footer__bottom { flex-direction: column-reverse; align-items: flex-start; gap: var(--space-s); }
  .site-footer__legal-menu { flex-wrap: wrap; }
}

@media (max-width: 36rem) {
  .site-footer__main { grid-template-columns: 1fr; }
  .site-footer__navigation { grid-column: auto; }
}