.hui-Footer {
  font-family: 'Lato', sans-serif;
}

.hui-Footer__beneficiary {
  background-color: $green-light;
  padding: $x-10;
  font-size: $x-4;
  font-weight: 300;
  color: white;
}

.hui-Footer__beneficiary,
.hui-Footer__legalLinks,
.hui-Footer__siteLinks {
  text-align: center;
}

.hui-Footer__siteLinks {
  color: $green-light;
  text-transform: uppercase;
  font-size: $x-3;
  padding-top: 10px;
  padding-bottom: 30px;
  position: relative;
}

.hui-Footer__siteLinksLeft,
.hui-Footer__siteLinksRight,
.hui-Footer__logo {
  display: inline-block;
}

.hui-Footer__logo {
  height: $x-8;
  max-width: 100%;
  padding: 0 30px;
  line-height: $x-3;
  margin-bottom: -8px;
  border: 0;
}

.hui-Footer__legalLinks {
  color: $grey-light;
  border-top: 1px solid $grey-lighter;
  padding: $x-5 0;
  font-size: $x-3;
  font-weight: 300;
  font-style: italic;
  text-rendering: geometricPrecision;
}

.hui-Footer__siteLink,
.hui-Footer__legalLink,
.hui-Footer__beneficiaryInfo {
  display: inline-block;
  padding: 0 $x-3;
  text-decoration: none;
  color: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: 0.05em;
}

.hui-Footer__socialMedia {
  color: $green-light;
  text-align: center;
}

@media screen and (min-width: 920px) {
  .hui-Footer__legalLink + .hui-Footer__legalLink,
  .hui-Footer__beneficiaryInfo + .hui-Footer__beneficiaryInfo {
    border-left: 1px solid currentColor;
  }
}

@media screen and (max-width: 919px) {
  .hui-Footer__siteLinksLeft,
  .hui-Footer__siteLinksRight {
    width: 50%;
  }

  .hui-Footer__siteLink {
    display: block;
    line-height: $x-12;
  }

  .hui-Footer__logo {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    padding: 0;
    margin: 0;
  }

  .hui-Footer__legalLink {
    display: block;
    line-height: $x-11;
  }
}

@media screen and (max-width: 500px) {
  .hui-Footer__siteLinks {
    padding-top: $x-12;
  }

  .hui-Footer__logo {
    top: 0;
    transform: translateX(-50%);
  }

  .hui-Footer__beneficiaryInfo {
    padding-top: $x-2;
    padding-bottom: $x-2;
  }
}