/* GTGF v19.20 - homepage-hero met de staande foto van twee renners in GTGF-tenue.
   Alleen actief als de hero de klasse .gtgf-home13__hero--foto draagt (zie
   inc/home-hero-foto-v1920.php). Zonder die klasse blijft de oude hero ongemoeid.

   Waarom een eigen opmaak: de foto is staand (4:5), de hero is breed. Vol-breed
   uitsnijden liet de linker renner achter de koptekst verdwijnen en sneed de
   rechter af. Daarom staat de foto op desktop in de rechterzone van de hero (op zeer brede
   schermen begrensd op 900px, anders wordt de uitsnede te krap), met een zachte overgang naar donker links, zodat beide shirts zichtbaar
   blijven naast de tekst. Op mobiel staat de foto bovenin en de tekst eronder. */

/* Desktop en breed: foto in de rechterzone, vloeiend uitlopend naar links. */
body.home.gtgf-v14 .gtgf-home13__hero--foto .gtgf-home13__hero-media {
	left: auto;
	right: 0;
	width: min(60%, 900px);
	height: 100%;
	object-fit: cover;
	object-position: 50% 39%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
	mask-image: linear-gradient(90deg, transparent 0, #000 26%);
}
body.home.gtgf-v14 .gtgf-home13__hero--foto .gtgf-home13__hero-shade {
	background:
		linear-gradient(90deg, rgba(3, 4, 5, .96) 0%, rgba(3, 4, 5, .9) 36%, rgba(3, 4, 5, .34) 56%, rgba(3, 4, 5, .1) 78%, rgba(3, 4, 5, .24) 100%),
		linear-gradient(0deg, rgba(3, 4, 5, .55), transparent 34%);
}

/* Tablet: de tekstkolom neemt meer ruimte, dus de foto krijgt iets meer breedte. */
@media (max-width: 980px) {
	body.home.gtgf-v14 .gtgf-home13__hero--foto .gtgf-home13__hero-media {
		width: 64%;
		object-position: 50% 38%;
	}
	body.home.gtgf-v14 .gtgf-home13__hero--foto .gtgf-home13__hero-shade {
		background:
			linear-gradient(90deg, rgba(3, 4, 5, .96) 0%, rgba(3, 4, 5, .9) 40%, rgba(3, 4, 5, .4) 60%, rgba(3, 4, 5, .16) 82%, rgba(3, 4, 5, .26) 100%),
			linear-gradient(0deg, rgba(3, 4, 5, .55), transparent 34%);
	}
}

/* Mobiel: foto vol-breed bovenin, tekst onderin op een donkere uitloop. */
@media (max-width: 720px) {
	body.home.gtgf-v14 .gtgf-home13__hero--foto .gtgf-home13__hero-inner {
		min-height: 600px;
	}
	body.home.gtgf-v14 .gtgf-home13__hero--foto .gtgf-home13__hero-media {
		left: 0;
		right: 0;
		width: 100%;
		object-position: 50% 14%;
		-webkit-mask-image: none;
		mask-image: none;
	}
	body.home.gtgf-v14 .gtgf-home13__hero--foto .gtgf-home13__hero-shade {
		background: linear-gradient(0deg, rgba(3, 4, 5, .97) 0%, rgba(3, 4, 5, .92) 44%, rgba(3, 4, 5, .4) 66%, rgba(3, 4, 5, .06) 100%);
	}
}