/* Joh Clothing v2: groep Diensten 2 (create-your-own-merch, webshop-fulfilment, branding-promotiemateriaal,
 * design-creatieve-ondersteuning). Alleen wat 10-basis.css en 20-componenten.css niet dekken.
 * (joh-tekstblok staat nu in 20-componenten.css, samen met joh-sector-tekst.)
 * joh-kolommen   (vc_row class="joh-kaarten joh-kolommen"): raster met tekstkolommen zonder kaart.
 * joh-lijst-2kol (el_class op vc_column_text): korte opsomming in 2 kolommen vanaf tablet.
 * joh-heel       (span in een kop): woord niet afbreken, bv. T-shirt.
 * joh-kop-branding, joh-beeld-flessen, joh-beeld-sokken (op de vc_row): uitsnede van staande beelden.
 */

/* Tekstkolommen zonder kaart: meer lucht tussen de blokken als ze onder elkaar komen */
@media only screen and (max-width: 999px) {
	body .main-content .joh-kolommen .joh-raster > .row_col_wrap_12_inner { row-gap: 36px; }
}
@media only screen and (max-width: 690px) {
	body .main-content .joh-kolommen .joh-raster > .row_col_wrap_12_inner { row-gap: 28px; }
}

/* Lange lijst met korte items: 2 kolommen vanaf tablet, op gsm gewoon onder elkaar */
@media only screen and (min-width: 691px) {
	body .main-content .joh-lijst-2kol ul { columns: 2; column-gap: 40px; }
	body .main-content .joh-lijst-2kol li { break-inside: avoid; }
}

/* T-shirt niet over twee regels */
body .main-content .joh-heel { white-space: nowrap; }

/* Uitsnede: logo van de Padelpreneur-wand, opdruk op de flessen en sokken in beeld houden bij 16:10 en 4:3 */
body .main-content .joh-kop-branding .img-with-aniamtion-wrap img { object-position: 50% 30%; }
body .main-content .joh-beeld-flessen .img-with-aniamtion-wrap img { object-position: 50% 80%; }
body .main-content .joh-beeld-sokken .img-with-aniamtion-wrap img { object-position: 50% 40%; }