@charset "UTF-8";
/* ====== BASIS LAYOUT ====== */

.two-col {
  display: flex;
  flex-direction: column;        /* mobiel & tablet: onder elkaar */
  gap: 2rem;  

}

/* Desktop: naast elkaar */
@media (min-width: 1024px) {
  .two-col {
    flex-direction: row;
  }
}

.two-col__col {
  flex: 1;
}

/* Tekstkolom basisstijl (pas naar smaak aan) */
.two-col__col--text {
  padding: 5rem;
}

/* Achtergrondfoto in kolom */
.two-col__col--image {
  background-image: var(--two-col-bg-image);
  background-size: cover;
  background-position: center;
  min-height: 500px;            /* zodat hij ook zonder content hoogte heeft */
}

/* ====== VARIANT 1: tekst links, foto rechts ====== */

.two-col--text-left-image-right {
  /* HTML-volgorde bepaalt hier de layout,
     dus geen extra CSS nodig voor de richting */
}

/* ====== VARIANT 2: foto links, tekst rechts ====== */


@media (max-width: 1023px) {
  .two-col--image-left-text-right {
    flex-direction: column;     /* expliciet voor de zekerheid */
  }

  .two-col--image-left-text-right .two-col__col--image {
    order: 2;
  }

  .two-col--image-left-text-right .two-col__col--text {
    order: 1;
  }
}

/* ====== VARIANT 3: foto full-width, tekst gecentreerd eronder ====== */

.two-col--image-full {
  display: block;               /* we wijken af van 2 kolommen */
}

/* Foto over de volle breedte */
.two-col__image-full {
  width: 100%;
  background-image: var(--two-col-bg-image);
  background-size: cover;
  background-position: center;
  min-height: 700px;
}

/* Tekstblok gecentreerd en max. 800px breed  */
.two-col__content-centered {
  max-width: 900px;          
  margin: 3rem auto 0;
  text-align: left;
  padding: 1rem 80px 4rem 80px;
}

/* CSS Document */