.footer {
  background-color: var(--black);
  align-items: flex-end;
  padding-top: max(6.25rem, 5vw);
  padding-bottom: 3.5em;
  grid-template-rows: auto 1.75em;
}

.footer,
.footer a {
  color: var(--green);
}

.footer a {
  transition: color 0.3s ease;
}

.footer a:hover {
  color: var(--light-green);
}

.footer__logo-img {
  display: flex;
  width: max(6.8275rem, var(--grid-col-width));
  height: auto;
}

.footer__logo {
  grid-row: 1 / span 1;
  grid-column: 3 / span 2;
  justify-self: flex-start;
}

.footer__nav {
  grid-row: 4 / span 1;
  grid-column: 8 / span 5;
  justify-self: flex-end;
}

.footer__menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: max(1rem, 0.625vw);
  font-weight: 600;
  text-transform: uppercase;
}

.footer__menu-link {
  display: flex;
  line-height: 1;
}

.footer__menu-item:not(:last-child)::after {
  content: "|";
}

.footer__menu-item {
  display: flex;
  align-items: center;
  gap: 0.35em;
}

.footer__openinghours {
  grid-row: 1 / span 1;
  grid-column: 8 / span 2;
}

.footer__address {
  grid-row: 1 / span 1;
  grid-column: 5 / span 3;
}

.footer__copyright {
  grid-row: 4 / span 1;
  grid-column: 3 / span 5;
  font-size: max(1rem, 0.625vw);
}

.footer::after {
  content: "";
  grid-row: 3 / span 1;
  grid-column: 3 / span 10;
  mask-image: url("../img/wave-repeatable.svg");
  mask-repeat: repeat-x;
  mask-size: contain;
  background-color: currentColor;
  height: max(0.3375rem, 0.27em);
  width: 100%;
  margin-top: 1.2em;
  margin-bottom: 0.48em;
}

.footer__tablereservation {
  grid-row: 1 / span 2;
  grid-column: 11 / span 2;
  justify-self: flex-end;
  align-self: flex-end;
}

.footer__openinghours-headline {
  margin: 0;
}

.footer__openinghours-table td {
  padding: 0;
}

.footer__openinghours-table td:first-child {
  text-transform: uppercase;
}

.footer__openinghours-table td:last-child {
  padding-left: 1em;
}

.footer__utilities {
  grid-row: 1 / span 1;
  grid-column: 10 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(1rem, 1.015625vw);
  justify-self: center;
}

.footer__job-btn {
  mask-image: url("../img/jobs-icon.svg");
  aspect-ratio: 95.46/111;
  margin-bottom: 1em;
}

html[lang="en-US"] .footer__job-btn {
  mask-image: url("../img/jobs-icon-en.svg");
}

.footer__socials-wrapper {
  grid-column: 12 / span 1;
  justify-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: max(0.625rem, 0.5em);
}

.footer__socials-btn {
  border-radius: 100%;
  border: 2px solid currentColor;
  height: max(2.5rem, 2em);
  width: max(2.5rem, 2em);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__socials-btn::after {
  content: "";
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.footer__socials-btn--facebook::after {
  mask-image: url("../img/facebook-icon.svg");
  height: 56.944444444444444%;
  aspect-ratio: 11.16/20.5;
}

.footer__socials-btn--instagram::after {
  mask-image: url("../img/instagram-icon.svg");
  height: 50%;
  aspect-ratio: 1;
}

.footer__utilitylinks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
}

@media (max-width: 1549.98px) {
  .footer__logo {
    grid-column: 2 / span 2;
  }

  .footer__address {
    grid-column: 4 / span 3;
  }

  .footer__openinghours {
    grid-column: 7 / span 3;
  }

  .footer__copyright {
    grid-column: 2 / span 6;
  }

  .footer::after {
    grid-column: 2 / span 12;
  }

  .footer__nav {
    grid-column: 8 / span 6;
  }

  .footer__socials-wrapper {
    grid-column: 13 / span 1;
  }

  .footer__utilities {
    grid-column: 10 / span 3;
  }
}


@media (max-width: 1199.98px) {

  .footer {
    grid-template-rows: unset;
  }

  .footer__logo {
    grid-column: 2 / span 2;
  }

  .footer__address {
    grid-column: 4 / span 5;
  }

  .footer__openinghours {
    grid-column: 9 / span 5;
  }

  .footer__utilities {
    grid-column: 2 / span 6;
    grid-row: unset;
    margin-block: 3.125rem;
  }

  .footer__socials-wrapper {
    grid-column: 8 / span 6;
    justify-self: center;
    margin-block: 3.125rem;
  }
}

@media (max-width: 991.98px) {
  .footer {
    padding-block: 6.25rem;
  }

  .footer__logo,
  .footer__address,
  .footer__openinghours,
  .footer__utilities,
  .footer__socials-wrapper,
  .footer__copyright,
  .footer__nav {
    grid-column: 2 / span 12;
    grid-row: unset;
    justify-self: center;
    text-align: center;
  }

.footer__utilitylinks {
  align-items: center;
}

  .footer::after {
    grid-row: 6 / span 1;
    grid-column: 1 / span 14;
  }

  .footer__address {
    margin-block: 3.125rem;
  }

  .footer__copyright {
    margin-top: 3.125rem;
    margin-bottom:1.875rem ;
  }

  .footer__utilities {
    margin-bottom: 0;
  }

}