/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer { background: var(--footer-bg); color: var(--footer-text); }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-block: 64px 48px;
}
.footer-col__title {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--footer-text); font-size: 15px; transition: color .15s ease; }
.footer-col a:hover { color: #fff; }
.footer-ext { display: inline-flex; align-items: center; gap: 5px; }
.footer-ext .ext { width: 11px; height: 11px; opacity: .7; }

.footer-col--brand { display: flex; flex-direction: column; gap: 18px; max-width: 360px; }
.footer-logo__img { height: 44px; width: auto; }
.footer-tagline { font-size: 15px; line-height: 1.6; color: var(--footer-text); }

.socials { display: flex; gap: 14px; }
.socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255, 255, 255, .08); color: #fff;
  transition: background .15s ease;
}
.socials a:hover { background: var(--red); }
.socials svg { width: 18px; height: 18px; }

.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.site-footer__bottom .container { padding-block: 22px; }
.site-footer__bottom p { font-size: 13px; color: var(--text-faint); }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; padding-block: 48px 32px; }
}