footer {
  padding: 2rem;
  background-color: var(--overlay-background-color);
  font-size: var(--body-font-size-s);
  position: relative;
}

footer .footer {
  max-width: 1200px;
  margin: auto;
}

footer .footer p {
  margin: 0;
}

footer .columns > div {
  align-items: baseline;
}

/* Pre Footer */
footer .pre-footer a {
  font-family: var(--graphik-semibold);
  font-size: var(--body-font-size-xs);
  font-weight: 600;
  line-height: 1.15;
  color: #004dff;
  text-transform: uppercase;
  text-decoration: none;
}

footer .pre-footer a::after {
  font-family: var(--icomoon);
  content: "\e900";
  font-size: 40px;
  font-weight: 200;
  position: relative;
  top: 10px;
}

footer .pre-footer ul {
  padding: 0;
}

footer .pre-footer ul li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

/* Footer black background */
footer .footer-black {
  position: absolute;
  left: 0;
  color: var(--secondary-text-color);
  background-color: var(--footer-background-color);
  width: 100%;
}

footer .footer-black > div {
  padding: 2rem;
}

footer .footer-black > div:last-of-type {
  padding-top: unset;
}

footer .footer-black .acn-logo {
  display: block;
  content: ' ';
  height: 76px;
  width: 46px;
  background: transparent url('../../icons/acn-brand-icon.svg') no-repeat;
}

footer .footer-black .columns > div {
  align-items: baseline;
  margin-top: 0.625rem;
  margin-bottom: 1.4rem
}

footer .footer-black .columns:not(.columns.copyright) {
  border-bottom: 1px solid var(--secondary-text-color);
}

footer .footer-black .columns ul {
  display: flex;
  align-items: baseline;
  flex-flow: row wrap;
  column-gap: 30px;
  padding: unset;
  margin: unset;
}

footer .footer-black .columns ul li {
  list-style: none;
}

footer .footer-black .columns ul li a {
  display: flex;
  font-size: var(--body-font-size-xxs);
  line-height: 50px;
  color: var(--secondary-text-color);
  text-transform: uppercase;
  text-decoration: underline;
}

footer .footer-black .columns ul li a:hover {
  color: white;
}

footer .footer-black .columns ul li a span.icon {
  position: relative;
  height: 35px;
  width: 35px;
  border: 2px solid var(--secondary-text-color);
  border-radius: 100%;
  color: var(--secondary-text-color);
}

footer .footer-black .columns ul li a span.icon:hover {
  border: 2px solid white;
  color: white;
}

footer .footer-black .columns ul li a span.icon svg {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  font-size: 15px;
}

.columns ul li picture {
  display: block;
  width: 20px;
  aspect-ratio: 1 / 1;
  height: 20px;
  transition: unset;
  margin: -2px auto 0;
}

.columns ul li:hover picture {
  filter: brightness(0) saturate(100%) invert(98%) sepia(6%) saturate(299%) hue-rotate(221deg) brightness(116%) contrast(100%);
}

.columns ul li picture img {
  width: 100%;
  object-fit: contain;
  height: fit-content;
}

footer .footer-black .columns:not(.columns.copyright) ul {
  align-items: center;
}

/* stylelint-disable-next-line no-descending-specificity */
footer .footer-black .columns.copyright > div > div,
footer .footer-black .columns.copyright ul li a {
  font-size: var(--body-font-size-xxxs);
  font-weight: 400;
  text-transform: none;
}

 @media (min-width: 768px) {
  footer .footer-black .columns ul {
    column-gap: 9px;
  }

  footer .pre-footer {
    padding-bottom: 40px;
  }

  footer .pre-footer .columns > div {
    display: flex;
  }

  footer .footer-black .columns > div {
    display: flex;
    column-gap: 20px;
    align-items: center;
  }

  footer .pre-footer .columns > div > div {
    flex: auto;
  }

  footer .footer-black .columns:not(.columns.copyright) ul{
    column-gap: 26px;
  }

  footer .footer-black .columns > div {
    flex-direction: row;
  }
} 

@media (min-width: 900px) {
  footer .footer-black .columns ul {
    column-gap: 30px;
  }

  footer .pre-footer {
    padding-bottom: 95px;
  }

  footer .pre-footer .columns > div > div {
    width: 41%;
    flex: unset;
  }

  footer .footer-black .columns > div > div:last-child {
    margin-left: auto;
  }

  footer .footer-black .acn-logo {
    display: block;
    content: '';
    height: 46px;
    max-width: 46px;
    background: transparent url('../../icons/acn-brand-icon.svg') no-repeat;
    padding-right: 15px;
  }

  footer .footer-black .columns:not(.columns.copyright) ul{
    column-gap: 45px;
  }

  footer .footer-black .columns > div {
    flex-direction: row;
  }
}

footer .footer-heading {
  font-size: 30px;
  font-weight: bold;
  font-family: var(--heading-font-family);
  line-height: 37.5px;
  margin: 1em 0;
  color: #333;
}

@media (max-width: 900px) {
  footer .footer-heading {
    line-height: 30px;
  }
}