.l3c-footer__logo-band {
  container: l3c-footer-logos / inline-size;
}

.l3c-footer__logo-band .row {
  --bs-gutter-x: 30px;
  --footer-logo-gap: 6px;
  --footer-logo-width: 64px;
  --footer-logo-height: 38px;
  --footer-distribution-height: 44px;
  row-gap: 18px;
}

.publisher-footer__logos {
  display: grid;
  grid-template-columns: repeat(2, var(--footer-logo-width));
  gap: var(--footer-logo-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.publisher-footer__logos--six {
  grid-template-columns: repeat(3, var(--footer-logo-width));
  min-block-size: var(--footer-distribution-height);
  align-content: end;
}

footer .publisher-footer__logos > li {
  display: grid;
  place-items: center;
  min-block-size: var(--footer-logo-height);
  margin: 0;
  padding: 5px 7px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: #fff;
}

.publisher-footer__logos img {
  display: block;
  inline-size: 100%;
  block-size: 26px;
  object-fit: contain;
}

.publisher-footer__logos--distribution {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-inline-size: 15rem;
}

footer .publisher-footer__logos--distribution > li {
  min-block-size: var(--footer-distribution-height);
}

.publisher-footer__logos--distribution img {
  max-inline-size: 108px;
  block-size: 27px;
}

@container l3c-footer-logos (min-width: 1100px) {
  .l3c-footer__logo-band .row {
    /* The four-column media block sets the width for all three groups. */
    --footer-logo-width: min(64px, calc((100cqw - 2 * var(--bs-gutter-x) - 15 * var(--footer-logo-gap)) / 18));
  }

  .publisher-footer__logos--six {
    grid-template-columns: repeat(6, var(--footer-logo-width));
  }

  .publisher-footer__logos--distribution {
    position: relative;
    inset-block-start: calc((var(--footer-distribution-height) - var(--footer-logo-height)) / 2);
  }
}