/* --------------------- Logo --------------------- */
.logo-item {
  --lr: auto;          /* aspect ratio van het vlak (per apparaat gezet vanuit de sectie) */
  --lh: 300px;         /* hoogte van het vlak: 300px bij "automatisch", anders volgt ze de aspect ratio */
  --ls: 160px;         /* maximale logo-breedte */
}

.logo-display {
  position: relative;
  border-radius: 25px;
  aspect-ratio: var(--lr);
  height: var(--lh);
}

/* Het vlak zelf (kleurvlak per variant); doet ook dienst als "container" zodat het logo mee kan schalen */
.logo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--lr);
  height: var(--lh);
  border-radius: 25px;
  container-type: size;
}

/* Het logo: nooit breder dan het vlak, en nooit hoger dan het vlak. Zo blijft het altijd volledig zichtbaar. */
.logo-mark {
  flex: none;
  width: min(var(--ls), 100%);
}

.logo-mark svg,
.logo-mark img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}

@supports (width: 1cqw) {
  .logo-mark { width: min(var(--ls), 82cqw); }
  .logo-mark svg,
  .logo-mark img { max-height: 80cqh; }
}

/* Titel + vlak: op tablet/mobiel onder elkaar, en de kolom mag nooit breder worden dan het scherm */
.logo-item .split-1-3 > * { min-width: 0; }

@media (max-width: 900px) {
  .logo-item .split-1-3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}