/* ===================================
   Case study: banner ads, with a set of images that roll through a frame. Script: script.mjs.
=================================== */

.section_work_banners .banner_image_items .banner_image_item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.section_work_banners .banner_image_items {
	position: relative;
}
.rollover_items {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 15.6%;
	height: 60%;
	overflow: hidden;
}

.rollover_item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translateY(100%); /* every image waits below the frame */
	transition: none; /* back below the frame at once, ready for its turn */
}

.rollover_item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* current image: in the frame */
.rollover_item.is-active {
	transform: none;
	z-index: 2;
	transition: transform 800ms var(--ease-out);
}

/* previous image: leaves upwards */
.rollover_item.is-leaving {
	transform: translateY(-100%);
	transition: transform 800ms var(--ease-out);
}