.footer {
  font-size: 16px;
}

.footer hr {
  margin: 3rem 0;
  border-color: rgba(255, 255, 255, .5);
}

.footer h4 {
  opacity: .5;
  font-size: 19px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: .5em;
}

.footer .logo img {
  max-width: 100%;
  width: 110px;
  height: auto;
  display: block;
  margin-bottom: 4px;
}

.footer-menu {
  display: flex;
  gap: 0.75em;
  flex-direction: column;
}

.footer-menu a {
  color: currentColor;
  font-weight: 500;
  text-decoration: none;
}

.footer-menu a:hover {
  text-decoration: underline;
}

.footer-top {
  padding: 3rem 0;
  color: black;
  background-color: white;
}

.footer-middle {
  padding: 3rem 0;
  color: white;
  background-color: black;
}

.footer-bottom {
  padding: 1em 0;
  color: #C3C3C3;
  background-color: #29272A;
}

.footer-social-media {
  display: inline-flex;
  gap: 12px;
}

.footer-social-media svg {
  fill: white;
  width: 2rem;
  height: 2rem;
  display: block;
}

.footer-social-media a {
  background-color: rgba(255, 255, 255, .15);
}

.footer-social-media a:hover {
  opacity: .75;
}

.footer-social-media-accent a {
  background-color: var(--primary-color);
}

.footer-bottom nav {
  display: inline-flex;
  gap: 2em;
  margin-left: 2em;
}

.footer-bottom nav a {
  color: currentColor;
  font-weight: 500;
  text-decoration: none;
}

.footer-bottom nav a:hover {
  color: white;
}

@media only screen and (max-width: 48em) {

  .footer-top,
  .footer-middle {
    padding: 2rem 0;
  }

  .footer hr {
    margin: 1.5rem 0;
  }
}

@media only screen and (max-width: 30em) {
  .footer-bottom {
    font-size: 14px;
  }

  .footer-bottom nav {
    margin-left: 0;
    margin-top: 8px;
    gap: .5rem;
  }
}