/* ==================================================
   OVER ONS

   Een welkomstkop, daaronder drie blokken die om en om
   van kant wisselen, en een afsluitende oproep.
================================================== */

.over-ons__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
}

.over-ons__welkom {
  max-width: 41rem;
  align-self: center;

  text-align: center;
}


/* --------------------------------------------------
   Tekst met foto
-------------------------------------------------- */

.over-ons__blok {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.over-ons__blok--gespiegeld .over-ons__tekst {
  order: 2;
}

.over-ons__tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--content-gap-m);
}

/*
 * De foto loopt mee met de hoogte van de tekst ernaast,
 * zodat de twee kolommen onderaan gelijk eindigen.
 */
.over-ons__blok img {
  width: 100%;
  height: 100%;
  min-height: 18rem;

  object-fit: cover;
}

@media (max-width: 800px) {

  .over-ons__blok {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }

  .over-ons__blok--gespiegeld .over-ons__tekst {
    order: 0;
  }

  .over-ons__blok img {
    height: auto;
    max-height: 22rem;
  }

}


/* De afsluitende oproep gebruikt het .cta-blok uit global.css */