/* Footer variants preserve contact content and the compact baseline. */
:root {
  --footer-logo-ratio: 560 / 174;
  --footer-logo-visible: .84;
}
/* Operator details required by law (company, seat, ID, register entry): in the
   compact footer a full-width line under the logo and the links. */
footer {
  flex-wrap: wrap;
  row-gap: var(--gap-sm);
}
.footer-legal {
  order: 1;
  flex-basis: 100%;
  font-size: inherit;
  line-height: inherit;
}
:is([data-footer="wide"], [data-footer="cropped"]) footer {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: var(--gap-xl);
}
:is([data-footer="wide"], [data-footer="cropped"]) footer > .footer-legal {
  display: block;
  grid-row: 1;
  grid-column: 1;
}
:is([data-footer="wide"], [data-footer="cropped"]) footer > a:last-child {
  grid-row: 1;
  grid-column: 2;
}
:is([data-footer="wide"], [data-footer="cropped"]) footer .brand {
  grid-row: 2;
  grid-column: 1 / -1;
  width: 100%;
}
[data-footer="cropped"] .contact {
  padding-bottom: var(--frame-bottom);
}
[data-footer="cropped"] footer .brand {
  width: calc(100% + var(--gutter) * 2);
  margin-inline: calc(var(--gutter) * -1);
  aspect-ratio: calc(var(--footer-logo-ratio) / var(--footer-logo-visible));
  overflow: hidden;
}
[data-footer="cropped"] footer .brand img {
  width: 100%;
  height: auto;
}
/* On wide screens the full-bleed wordmark follows the contact section gutter. */
@media (min-width: 1700px) {
  [data-footer="cropped"] .contact {
    --gutter: max(4.6vw, calc((100vw - 1560px) / 2));
  }
}