/* Zwevende afbeelding (Divi: dsm_floating_multi_images).
   De container heeft een vaste hoogte per breakpoint (via --td-float-h*), de
   afbeelding staat er absoluut in en vult de kolombreedte. Daardoor mag hij
   onder de container uitsteken, precies zoals in de originele module. */
.td-float{
	position:relative;
	width:100%;
	height:var(--td-float-h,500px);
}
.td-float__img{
	position:absolute;top:0;left:0;
	width:100%;max-width:100%;height:auto;
	will-change:transform;
	/* 5s heen-en-weer, -3s zodat hij niet exact op 0 begint (zoals Divi). */
	animation:td-float-up-down 5s ease-in-out -3s infinite alternate;
}
@keyframes td-float-up-down{
	0%{transform:translateY(0);}
	50%{transform:translateY(-20px);}
	100%{transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
	.td-float__img{animation:none;}
}

/* Tablet/telefoon: lagere container (Divi's floating_height per breakpoint). */
@media (max-width:980px){
	.td-float{height:var(--td-float-h-t,450px);}
}
@media (max-width:767px){
	.td-float{height:var(--td-float-h-p,200px);}
}