.site-footer {
  background: linear-gradient(
    135deg,
    oklch(0.7 0.2 5) 0%,
    oklch(0.6 0.22 10) 100%
  );
  color: var(--color-white);
  padding-block: clamp(32px, 5vw, 56px) 20px;
}

.site-footer__inner {
  max-inline-size: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
}

.site-footer__logo img {
  inline-size: clamp(88px, 10vw, 120px);
  block-size: auto;
  filter: brightness(0) invert(1);
}

.site-footer__nav ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, auto);
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
}

.site-footer__nav a {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: var(--font-size-sm);
  transition: opacity 0.25s ease;
  opacity: 0.9;
}

@media (any-hover: hover) {
  .site-footer__nav a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

.site-footer__social {
  display: flex;
  gap: 12px;
}

.site-footer__social a {
  inline-size: 36px;
  block-size: 36px;
  display: grid;
  place-items: center;
  border-radius: 100vmax;
  background: oklch(1 0 0 / 0.15);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.site-footer__social svg {
  inline-size: 18px;
  block-size: 18px;
  color: var(--color-white);
}

@media (any-hover: hover) {
  .site-footer__social a:hover {
    background: oklch(1 0 0 / 0.3);
    transform: translateY(-2px);
  }
}

.site-footer__copy {
  text-align: center;
  margin-block-start: 20px;
  padding-block-start: 20px;
  border-block-start: 1px solid oklch(1 0 0 / 0.2);
  font-size: var(--font-size-xs);
  opacity: 0.9;
  font-family: var(--font-en);
  letter-spacing: 0.05em;
}

@media (width < 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .site-footer__nav ul {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, auto);
    gap: 10px 18px;
  }
}