/* Footer bands: radio / tv, advertenties and link logos in a hairline grid of sleeve tiles. */
.bands { border-top: 1px solid var(--hair); }
.bands .wrap { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.bands .band-head { margin-bottom: clamp(20px, 2.4vw, 32px); }
.bands .band-head h2 { font-size: clamp(22px, 2.4vw, 32px); }

/* Hairlines are cell borders, so a short last row stays black instead of showing a grey ground. */
.logo-grid {
  list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
}
.logo-cell { min-height: 96px; display: flex; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
/* Logos belong to other parties, so they keep their own artwork: a sleeve-white tile with the logo in grey, in colour on hover. */
.logo-cell > a, .logo-cell > img { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 24px; min-width: 0; background: var(--sleeve); }
.logo-cell a { text-decoration: none; }
.logo-cell a:focus-visible { outline: 3px solid var(--sleeve-ink); outline-offset: -6px; }
.logo-cell img { display: block; width: 100%; height: 56px; object-fit: contain; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; transition: filter .2s var(--ease); }
.logo-cell > img { box-sizing: content-box; width: auto; flex: 1; }
.logo-cell a:hover img, .logo-cell a:focus-visible img { filter: none; }

@media (max-width: 620px) {
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-cell { min-height: 84px; }
  .logo-cell > a, .logo-cell > img { padding: 16px; }
}