/* Blok: Twee-koloms tekst. */
/* 75px = 5,56%% van 1350 (Divi's bevroren sectiepadding + rijpadding). De
   blauwe band houdt zijn eigen vaste 100px, die zet Divi daar hard. */
.block-two-col{padding:5.56% 0;}
@media (min-width:1350px){.block-two-col{padding:75px 0;}}
/* Kolomafstand = Divi's goot als percentage van de rij (goot 2 = 3%,
   goot 3 = 5,5%); een vaste px klopt maar op één schermbreedte.
   minmax(0,1fr) houdt de kolommen op de helft bij lange woorden. */
.block-two-col__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3%;row-gap:64px;align-items:start;}
.block-two-col--gutter-wide .block-two-col__inner{column-gap:5.5%;}
.block-two-col__head h2{color:var(--td-blue);font-size:40px;line-height:48px;margin:0;white-space:pre-line;}
.block-two-col__body{color:#000;font-family:"Inter",Helvetica,Arial,sans-serif;font-weight:300;font-size:15px;line-height:23.8px;}
.block-two-col__body p{margin:0 0 1em;}
.block-two-col__body p:last-child{margin-bottom:0;}

/* Tablet: stapelen, container 80%, kop 30px. */
@media (max-width:980px){
	/* Onder 980px rekent Divi vast: sectiepadding 50px + rijpadding 30px, en
	   30px tussen de gestapelde kolommen. */
	.block-two-col{padding:80px 0;}
	.block-two-col__inner{grid-template-columns:minmax(0,1fr);gap:30px;}
	.td-container.block-two-col__inner{width:80%;}
	.block-two-col__head h2{font-size:30px;line-height:36px;}
}

/* Telefoon: kleinere padding + kop. */
@media (max-width:767px){
	.block-two-col{padding:35px 0;}
	.block-two-col__head h2{font-size:24px;line-height:28.8px;}
}

/* Blauwe band-variant */
.block-two-col.block--blue{background:var(--td-blue);padding:100px 0;}
.block-two-col.block--blue h2{color:#fff;font-size:50px;line-height:60px;}
.block-two-col.block--blue .block-two-col__body{color:#fff;}

/* Blauwe band gestapeld: verticale tussenruimte zoals Divi (kop-rect +10px). */
@media (max-width:980px){
	.block-two-col.block--blue .block-two-col__inner{gap:47px;}
}

/* Blauwe band op telefoon: kleinere padding + kop + tussenruimte (Divi). */
@media (max-width:767px){
	.block-two-col.block--blue{padding:50px 0;}
	.block-two-col.block--blue h2{font-size:35px;line-height:42px;}
	.block-two-col.block--blue .block-two-col__inner{gap:40px;}
}

/* Icoon-lijst onder de tekst in de rechterkolom (gemeten: 23px eronder). */
.block-two-col__iconlist{margin-top:23px;}

/* Kop verticaal centreren t.o.v. de tekstkolom ernaast (blokoptie). */
.block-two-col--middle .block-two-col__inner{align-items:center;}

/* Kop rechts (blokoptie). Divi lost dit op met twee rijen: op desktop staat de
   tekst links en de kop rechts, gestapeld komt de kop weer bovenaan. Hier draait
   alleen de desktopweergave om, zodat de bronvolgorde (kop eerst) blijft kloppen. */
@media (min-width:981px){
	.block-two-col--reverse .block-two-col__head{order:2;}
	.block-two-col--reverse .block-two-col__body{order:1;}
}