.site-footer { display: grid; gap: 34px; padding: 54px 20px 24px; background: var(--ink); color: var(--white); }
.site-footer h2 { margin-bottom: 16px; font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.site-footer a:not(.logo) { display: block; width: fit-content; margin: 9px 0; color: rgba(255,255,255,.68); font-size: .82rem; transition: .2s ease; }
.site-footer a:hover { color: var(--white); }
.footer-brand p { max-width: 300px; margin: 14px 0 20px; color: rgba(255,255,255,.63); font-size: .84rem; }
.footer-instagram { border-bottom: 1px solid rgba(255,255,255,.4); }
.footer-bottom { display: flex; flex-direction: column; gap: 4px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.48); font-size: .68rem; }
.footer-bottom p { margin: 0; }

@media (min-width: 700px) {
  .site-footer { grid-template-columns: 1.7fr repeat(3, 1fr); padding: 70px 5vw 26px; }
  .footer-bottom { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
}