.site-footer {
  background:var(--color-primary);
  color:#dbe3ec;
  padding-block:3rem 1.5rem
}
.footer-grid {
  display:grid;
  gap:2rem
}
.site-footer .brand {
  color:white
}
.site-footer p {
  margin-top:1.2rem;
  max-width:23rem
}
.site-footer h2 {
  font-size:1rem;
  color:white;
  margin-bottom:1rem
}
.site-footer ul {
  list-style:none;
  padding:0;
  margin:0
}
.site-footer li+li {
  margin-top:.65rem
}
.site-footer a {
  color:#dbe3ec
}
.site-footer li a {
  text-decoration:none
}
.site-footer li a:hover {
  text-decoration:underline
}
.footer-bottom {
  border-top:1px solid #5d6878;
  margin-top:3rem;
  padding-top:1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:space-between;
  font-size:.875rem
}
.footer-bottom nav {
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem
}
.site-footer code {
  font-size:.8rem;
  overflow-wrap:anywhere
}
.site-footer .pending-label {
  color:#dbe3ec;
  font-size:var(--font-size-sm)
}

@media(min-width:768px) {
  .footer-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

}
@media(min-width:1024px) {
  .footer-grid {
  grid-template-columns:1.5fr 1fr 1fr 1.2fr
}

}