/*
 * projectBand — een breed beeld op een gekleurd vlak.
 *
 * Maten 1-op-1 van samdesign.nl (R9). Het vlak loopt van rand tot rand en is
 * 65% zo hoog als de band; daaronder is het wit. Op samdesign.nl staat dat als
 * `linear-gradient(180deg, <kleur> 65%, #FFFFFF00 0%)` — twee stops in de
 * verkeerde volgorde, wat de browser als een harde grens op 65% uitlegt. Hier
 * staat die grens er meteen goed.
 */

.projectBand {
  margin: 100px 0;
  padding: 100px var(--containerPadding);
  background: linear-gradient(
    180deg,
    var(--projectBandColor, #f4f1f5) 65%,
    transparent 65%
  );
}

/*
 * De afbeelding staat in het midden en vult de container, tenzij het component
 * een kleinere maat meegeeft: op samdesign.nl is de ene band een beeld van
 * 2548px dat op 1280 wordt teruggebracht en de andere een van 1024 dat op zijn
 * eigen maat blijft staan.
 */
.projectBandImage {
  width: var(--projectBandWidth, 100%);
  /* Nooit breder dan de inhoud van de pagina, ook al loopt het vlak eronder
     wél van rand tot rand. */
  max-width: min(100%, var(--containerMax));
  height: auto;
  margin-inline: auto;
  border-radius: var(--projectBandRadius, 0);
}

@media (max-width: 1024px) {
  .projectBand {
    margin-block: 50px;
    padding-block: 50px;
  }
}