.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--xs) var(--md);
  padding: var(--md) var(--gutter);
  font-size: var(--font-size-sm);
  color: var(--subtle);
  border-top: 1px solid var(--line);
  background-color: rgba(0, 0, 0, 0.6);
}

.site-footer nav {
  display: flex;
  gap: var(--md);
}

.site-footer a {
  color: var(--muted);
  transition: color var(--duration) var(--ease);
}

.site-footer a:hover {
  color: var(--light);
}

@media screen and (max-width: 600px) {
  .site-footer {
    flex-direction: column;
    text-align: center;
  }
}