:root {
  --container-gap: var(--space-l);
  --content-gap: var(--space-s);
  --card-gap: var(--space-xs);
  --grid-gap: var(--space-s);
  --letter-spacing: 0.125em;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
figure {
  margin: 0;
}
img {
  max-width: 100%;
  height: auto;
}
figure figcaption {
  margin-top: var(--space-s);
  font-size: var(--text-s);
  color: var(--shade);
}
.color-swash {
  aspect-ratio: 1;
}
.ff-btn, [class*="btn--"] {
  transition: all 0.25s ease-in-out;
}
.ff-btn:hover, [class*="btn--"]:hover {
  transform: translateY(-4px);
}
@media (min-width: 992px) and (max-width: 1280px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__grid nav {
    grid-column: 1 / 2;
  }
  .footer__grid nav + nav {
    margin-top: var(--space-m);
  }
  .footer__grid div {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
}