.block-image-group {
	padding-top: 0 !important;
	padding-block: 5rem !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	z-index: 10;
	position: relative;
	display: grid;
	gap: 3rem;
	overflow: hidden;
}

@media (min-width:950px) {
	.block-image-group {
		grid-template-columns: 1fr 1.8fr;
		align-items: center;
		padding-left: var(--side-spacing) !important;
	}
	
	
	.block-image-group.left-images {
		grid-template-columns: 1.8fr 1fr;
		padding-left: 0 !important;
		padding-right: var(--side-spacing) !important;
	}
	.block-image-group.left-images .image-rotate-container {
		order: 1;
	}
	.block-image-group.left-images .acf-innerblocks-container {
		order: 2;
	}
}
@media (min-width:1300px) {
	.block-image-group {
		grid-template-columns: 1fr 2fr;
		gap: 3rem 6rem;
	}
	.block-image-group.left-images {
		grid-template-columns: 2fr 1fr;
	}
}
@media (max-width:950px) {
	.image-rotate-container {
		padding-top: 55% !important;
	}
	
	.block-image-group .acf-innerblocks-container {
		order: 2;
		padding-inline: var(--side-spacing) !important;
	}
	.block-image-group .image-rotate-container {
		order: 1;
	}
}

@media (max-width:500px) {
	.block-image-group .image-rotate-container {
		transform: scale(1.3);
		transform-origin: bottom;
		top: 15%;
	}
	.image-rotate-child3 {
		animation-name: animation3;
		right: 0% !important;
	}
}

.image-rotate-container {
	width: 100%;
	height: auto;
	padding-top: 45%;
	margin-inline: auto;
	/* border: 1px solid white; */
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
	overflow: visible;
}
.image-rotate-child {
	width: 36%;
	height: auto;
	aspect-ratio: 2/2.5;
	object-fit: cover;
	background-color: coral;
	border-radius: 1rem;
	position: absolute;
	top: 0;
	transition: transform 0.1s ease-in-out;
	--progress: 0;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	box-shadow: 0rem .75rem 1.5rem rgba(0,0,0,.45);
}

.image-rotate-child1 {
	animation-name: animation1;
	left: 0%;
}
.image-rotate-child2 {
	animation-name: animation2;
}
.image-rotate-child3 {
	animation-name: animation3;
	right: -5%;
}
.block-image-group.left-images .image-rotate-child3 {
	right: 0;
}


@keyframes animation1 {
	0% { transform: translateX(0) translateY(-10%) rotate(-5deg); }
	100% { transform: translateX(-20px) translateY(-10%) rotate(6deg); }
}
@keyframes animation2 {
	0% { transform:rotate(12deg) translateY(10%); }
	100% { transform: rotate(-15deg) translateY(10%); }
}
@keyframes animation3 {
	0% { transform: translateX(0) translateY(-10%) rotate(-8deg); }
	100% { transform: translateX(20px) translateY(-10%) rotate(10deg); }
}