.site-footer {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(/images/hands-up.jpg) center / cover no-repeat;
}

.section-gray {
  --underline-color: var(--color-paleblue);
  background-color: #3a3a3a;
  color: white;
}
.site-footer .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.site-footer {
  padding: 1em 0;
}
.site-footer .container .footer-legal {
  grid-column: 1 / span 2;
  text-align: center;
  letter-spacing: .1em;
}

.site-footer .links-group {
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .8em;
  color: rgb(205, 205, 205);

}

.site-footer ul {
  display: flex;
  flex-direction: column;
  gap: .5em;
}

.footer-legal span {
  font-weight: bold;
  color: var(--color-gray) !important;
  background-color: white;
  border: .1em solid white;
  border-radius: 1em;
  padding: .2em .4em;
  font-family: monospace;
}
.footer-legal a {
  color: var(--color-gray) !important;
}
.site-footer ul {
  list-style: none;
  padding-left: 0;
}
.site-footer a {
  text-decoration: none;
  color: white;
}
.site-footer li {
  font-weight: 300;
  letter-spacing: .1em;
}
@media (min-width: 992px) {
  .site-footer .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .site-footer .container .footer-legal {
    grid-column: 1 / span 3;
  }
  .site-footer nav a {
    transition: all .5s ease;
  }
  .site-footer nav a:hover {
    border-bottom: .2em solid var(--color-paleblue);
  }
  .footer-legal span {
    font-size: 1.2em;
    font-weight: bold;
  }
}