/* Alleen de nieuwe landingspagina: bestaande site CSS blijft onaangeroerd. */
.em-mokken-landing .em-mokken-intro {max-width: var(--shell-width, 1200px);}
.em-mokken-content {padding-top: 18px;}
.em-mokken-mosaic {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(240px,auto);gap:0;overflow:hidden;border-radius:18px;background:#fff;}
.em-mokken-photo {min-height:265px;display:block;background:#fff;overflow:hidden;}
.em-mokken-photo img {display:block;width:100%;height:100%;object-fit:contain;}
.em-mokken-orange {background:#f47a39;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 24px;min-height:265px;box-sizing:border-box;}
.em-mokken-orange h2 {font-family:inherit;font-size:1.25rem;line-height:1.3;font-weight:700;text-transform:uppercase;margin:0 0 16px;color:white;}
.em-mokken-orange p {line-height:1.6;margin:0 0 19px;max-width:32ch;color:white;}
.em-mokken-button {display:inline-block;border:1px solid white;border-radius:8px;color:white;text-decoration:none;padding:10px 20px;font-weight:700;}
.em-mokken-button:hover,.em-mokken-button:focus-visible {background:white;color:#e86b2e;}
.em-mokken-how {margin:50px auto 8px;text-align:center;max-width:830px;background:#F4EFE8;border-radius:18px;padding:40px 45px;}
.em-mokken-how h2 {margin:0 0 18px;}
.em-mokken-how p:not(.eyebrow) {line-height:1.8;margin:0 auto 24px;}
@media(max-width:850px){.em-mokken-mosaic {grid-template-columns:repeat(2,minmax(0,1fr));}.em-mokken-orange,.em-mokken-photo {min-height:235px;}.em-mokken-how{padding:30px 24px;}}
@media(max-width:550px){.em-mokken-mosaic {grid-template-columns:1fr;}.em-mokken-photo{min-height:260px;height:260px;}.em-mokken-orange {min-height:230px;}.em-mokken-how{margin-top:28px;}.em-mokken-intro .em-tilt-line{font-size:clamp(2rem,8vw,3.8rem);}}


/* ECHTMIEK COMPACTE MOKKENCOLLAGE V2 */
@media (min-width: 851px) {
  .em-mokken-mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 290px);
    grid-auto-rows: 290px;
    gap: 0;
    border-radius: 20px;
  }

  .em-mokken-photo,
  .em-mokken-orange {
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
  }

  .em-mokken-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .em-mokken-orange {
    padding: 18px 22px;
  }
}

@media (min-width: 551px) and (max-width: 850px) {
  .em-mokken-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(265px, auto);
    gap: 0;
  }
}

/* Mokkencollage: fotos links, tekst rechts */
@media(min-width:851px){
  .em-mokken-mosaic{
    grid-template-rows:repeat(2,minmax(290px,auto));
    grid-auto-rows:auto;
  }
  .em-mokken-mosaic>.em-mokken-photo:nth-child(1){grid-column:1;grid-row:1}
  .em-mokken-mosaic>.em-mokken-photo:nth-child(2){grid-column:2;grid-row:1}
  .em-mokken-mosaic>.em-mokken-photo:nth-child(5){grid-column:1;grid-row:2}
  .em-mokken-mosaic>.em-mokken-photo:nth-child(6){grid-column:2;grid-row:2}
  .em-mokken-mosaic>.em-mokken-orange:nth-child(3){grid-column:3;grid-row:1}
  .em-mokken-mosaic>.em-mokken-orange:nth-child(4){grid-column:3;grid-row:2}
  .em-mokken-mosaic>.em-mokken-orange{
    padding:18px 22px;
  }
  .em-mokken-mosaic>.em-mokken-orange:nth-child(3){justify-content:flex-end;padding-bottom:5px}
  .em-mokken-mosaic>.em-mokken-orange:nth-child(4){justify-content:flex-start;padding-top:5px}
}

/* ECHTMIEK GELIJKE MOKGROOTTE */
@media(min-width:851px){
.em-mokken-mosaic>.em-mokken-photo{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden}
.em-mokken-mosaic>.em-mokken-photo img{width:auto;height:auto;max-width:78%;max-height:75%;object-fit:contain}
}