footer {
  background-color: var(--color-dark-char);
  color: var(--color-ivory);
}
footer .container-content {
  display: grid;
  grid-template: ". lg lg lg lg ." ". nl nl nl nl ." ". nv nv nv nv ." ". ry ry ry ry .";
  grid-template-rows: 100px auto auto auto;
  text-align: center;
  & a {
    color: var(--color-ivory);
    text-decoration: none;
    font-size: 1.25rem;
  }
}

footer #newsletter-signup {
  grid-area: nl;
  margin-top: 3em;
  & *:not(:last-child) {
    margin-top: 0;
    margin-bottom: 1.75rem;
  }
}
footer #newsletter-signup .header {
  font-size: 1.25em;
  font-weight: 800;

  line-height: 1.2em;
  letter-spacing: 0.15em;
}
footer #footer-logo {
  grid-area: lg;
  margin-top: 1em;
  & a {
    display: contents;
  }
  & img {
    width: 100%;
    height: clamp(50px, 100%, 75px);
    transition: all var(--animation-speed);
  }
  @media (min-width: 1080px) {
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
footer #nav {
  grid-area: nv;
  color: #fff;
  margin-top: 3em;
  margin-bottom: 3em;
}
footer #nav .social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin-bottom: 1em;
}
footer #nav .links {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
footer #responsibly {
  grid-area: ry;
  color: #999;
  text-align: center;
  text-transform: uppercase;

  font-size: 12px;
  line-height: 1;
  text-align: center;
  & a {
    font-size: inherit;
  }
}
footer #responsibly .header {
  font-size: 14px;
}

@media (min-width: 1080px) {
  footer .container-content {
    grid-template: "nl nl lg lg nv nv" ". ry ry ry ry .";
  }
  footer #newsletter-signup {
    display: flex;
    /* justify-content: end; */
    align-items: start;
    flex-direction: column;
    text-align: start;
  }
  footer #nav {
    margin-bottom: 0;
    text-align: end;
    align-self: end;
  }
  footer #nav .social {
    justify-content: end;
  }
}