*{
	margin: 0;
}

img{
	 display: block;
	 max-width: 100%;
}

body{
	min-height: 100vh;
}

figure{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


#A{ clip-path: polygon(	0 0, 	100% 0, 	100% 40%, 	0 20%	); }
#B{ clip-path: polygon(	0 20%, 	100% 40%, 	100% 60%, 	0 80%	); }
#C{ clip-path: polygon(	0 80%, 	100% 60%, 	100% 100%, 0 100%	); } 


/* #B, #C { display: none;} */

         /* #A:hover     { filter: hue-rotate(   0deg); }
body:has(#A:hover) #B { filter: hue-rotate( 120deg); }
body:has(#A:hover) #C { filter: hue-rotate(-120deg); }

body:has(#B:hover) #A { filter: hue-rotate( 120deg); }
         #B:hover     { filter: hue-rotate(   0deg); }
body:has(#B:hover) #C { filter: hue-rotate(-120deg); }

body:has(#C:hover) #A { filter: hue-rotate( 120deg); }
body:has(#C:hover) #B { filter: hue-rotate(-120deg); }
         #C:hover     { filter: hue-rotate(   0deg); } */

/* 	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A	A */
         #A:hover     { filter: hue-rotate(   0deg); clip-path: polygon(	0 0, 	100% 0, 	100% 70%, 	0 60%	); }
body:has(#A:hover) #B { filter: hue-rotate( 120deg); clip-path: polygon(	0 60%, 	100% 70%, 	100% 80%, 	0 90%	); }
body:has(#A:hover) #C { filter: hue-rotate(-120deg); clip-path: polygon(	0 90%, 	100% 80%, 	100% 100%, 0 100%	); }

/* 	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B	B */
body:has(#B:hover) #A { filter: hue-rotate( 120deg); clip-path: polygon(	0 0, 	100% 0, 	100% 10%, 	0 10%	); }
	     #B:hover     { filter: hue-rotate(   0deg); clip-path: polygon(	0 10%, 	100% 10%, 	100% 80%, 	0 90%	); }
body:has(#B:hover) #C { filter: hue-rotate(-120deg); clip-path: polygon(	0 90%, 	100% 80%, 	100% 100%, 0 100%	); }

/* 	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C	C */
body:has(#C:hover) #A { filter: hue-rotate( 120deg); clip-path: polygon(	0 0, 	100% 0, 	100% 20%, 	0 20%	); }
body:has(#C:hover) #B { filter: hue-rotate(-120deg); clip-path: polygon(	0 0%, 	100% 20%, 	100% 30%, 	0 20%	); }
		 #C:hover     { filter: hue-rotate(   0deg); clip-path: polygon(	0 20%, 	100% 30%, 	100% 100%, 0 100%	); }






/*
#A{ clip-path: unset; top:00vh; height: 33vh;}
#B{ clip-path: unset; top:33vh; height: 33vh;}
#C{ clip-path: unset; top:66vh; height: 33vh;}
*/

figure { transition: all 1s; }