.hmg-footer {}

.hmg-footer-contact {
  background: rgb(var(--hmg-color-main));
  color: rgb(var(--hmg-color-background));
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.hmg-footer-contact__title {
  color: rgb(var(--hmg-color-background));
}

.hmg-footer-contact__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hmg-footer-contact__link,
.hmg-footer-contact__blank {
  text-decoration: none;
  color: rgb(var(--hmg-color-background));
  display: flex;
  gap: 16px;
}

.hmg-footer-contact__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.hmg-footer-contact__icon--fill path {
  fill: rgb(var(--hmg-color-background));
}

.hmg-footer-contact__icon--stroke path {
  stroke: rgb(var(--hmg-color-background));
}

.hmg-footer-bottom {
  background-image: url('footer-image.png');
  background-size: cover;
  background-position: center;
  color: rgb(var(--hmg-color-background));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  gap: 20px;
  text-align: center;
  font-size: 14px;
}

.hmg-footer-bottom:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: .85;
  background-color: rgb(var(--hmg-color-grey-dark));
}

.hmg-footer-branding {
  position: relative;
}

.hmg-footer-terms {
  position: relative;
  display: flex;
  gap: 20px;
}

.hmg-footer-terms__link {
  color: rgb(var(--hmg-color-background));
  text-decoration: none;
}

.hmg-footer-legal {
  position: relative;
}

.hmg-footer-terms__link:focus,
.hmg-footer-terms__link:hover,
.hmg-footer-contact__link:hover,
.hmg-footer-contact__link:focus {
  text-decoration: underline;
}

@media screen and (min-width: 768px) {

  .hmg-footer-contact {
    padding: 50px;
    gap: 50px;
    font-size: 26px;
  }

  .hmg-footer-contact__link,
  .hmg-footer-contact__blank {
    gap: 24px;
  }

  .hmg-footer-contact__icon {
    width: 34px;
    height: 34px;
  }

  .hmg-footer-bottom {
    padding: 50px;
  }

  .hmg-footer-terms {
    gap: 24px;
  }
}

@media screen and (min-width: 1200px) {

  .hmg-footer-contact {
    flex-direction: row;
    gap: 100px;
    justify-content: center;
  }
}