.foot--columns { display: grid; gap: 2rem; padding-block: 3.5rem 2rem; }

@media (min-width: 48rem) { .foot--columns { grid-template-columns: 1.6fr repeat(3, 1fr); } }

.foot-brand { display: grid; gap: 0.75rem; align-content: start; }
.foot-brand .wordmark { color: var(--desk); }
.foot-brand p { margin: 0; max-width: 16rem; }

.foot-col { display: grid; gap: 0.55rem; align-content: start; }

.foot-col h2 {
  margin-bottom: 0.35rem;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236, 238, 241, 0.4);
}

.foot-col a { text-decoration: none; }
.foot-col a:hover { color: var(--live); }

.foot-base { grid-column: 1 / -1; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--rule-dark); }