:root {
  --footer-background-color: var(--color-green-500);
  --footer-text-color: var(--color-white);
  --footer-highlight-color: var(--color-turqoise-500);
  --footer-zindex: 5;
  --footer-columns: 1;
  --footer-gap: 2.5rem;
}

  @media (min-width: 640px) {:root {
    --footer-columns: 2
}
  }

  @media (min-width: 1024px) {:root {
    --footer-columns: 4
}
  }

.footer {
  background: var(--color-green-500);
  background: var(--footer-background-color);
  color: var(--color-white);
  color: var(--footer-text-color);
  z-index: 5;
  z-index: var(--footer-zindex);
  min-height: clamp(24rem, 5vw, 28rem);
}

.footer-wrapper {
  display: grid;
  grid-gap: 4rem 3rem;
  gap: 4rem 3rem;
  grid-template-columns: repeat(1, 1fr);
  grid-template-columns: repeat(var(--footer-columns), 1fr);
  padding-top: var(--padding-y);
  padding-bottom: var(--padding-y);
}

/**
 * Footer links
 */

.footer-wrapper a {
  display: block;
  margin-bottom: 0.5rem;
}

.footer-wrapper a[href]:hover {
    text-decoration: underline;
  }

.footer-wrapper a[href^="mailto:"],
.footer-wrapper a[href^="tel:"] {
  display: inline;
  display: initial;
  text-decoration: underline;
}

.footer-wrapper a[href^="mailto:"]:hover, .footer-wrapper a[href^="tel:"]:hover {
    text-decoration: none;
  }

.footer-menu-usps {
  display: flex;
  flex-direction: column;
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 2.5rem;
  margin-top: var(--footer-gap);
}

.footer-menu-usp {
  --list-color: var(--color-turqoise-700);
  display: flex;
  align-items: center;
  grid-gap: 0.25rem;
  gap: 0.25rem;
}

.footer-menu-usp svg {
    color: var(--color-turqoise-500);
    color: var(--footer-highlight-color);
  }

.footer-menu-stores a.has-children {
  margin-bottom: 0;
  font-size: 1.25rem;
}

.footer-menu-store + .footer-menu-store {
    display: block;
    margin-top: 2rem;
  }

/**
 * First level
 */

.footer-wrapper > .footer-menu > li > a {
  font-size: 1.5rem;
  font-family: var(--font-family-heading);
  text-transform: none;
  text-transform: initial;
  font-weight: 400;
  letter-spacing: -0.015rem;
  margin-top: 0;
  margin-bottom: 2.5rem;
  margin-bottom: var(--footer-gap);
}

/**
 * Has children
 */

.footer-wrapper a.has-children {
  font-weight: 800;
  margin-top: 2.5rem;
  margin-top: var(--footer-gap);
}

/**
 * Copyright
 */

.copyright {
  margin-top: 1rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 1024px) {

.copyright {
    text-align: right
}
  }