.banner-experiment-11-combined a {
	cursor: pointer;
	margin: 0 8px;
}

/* EXPERIMENT BACKGROUND — USED */
.banner-experiment-11-combined .experiment-background {
	height: 100%;
	position: relative;
	max-width: 100%;
	margin: auto;
	overflow-y: hidden;
}

/* EB-WRAPPER — BASE FLEX CONTAINER (USED BY VERSION 2) */
.banner-experiment-11-combined .experiment-background .eb-wrapper {
	display: flex;
}

/* -----------------------------------------
   VERSION 2 — THIS IS THE ONE YOU'RE USING
----------------------------------------- */

.banner-experiment-11-combined .experiment-background .eb-wrapper.two {
	display: flex;
	align-items: flex-end;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-first-image {
	z-index: 2;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-left-slide {
	position: relative;
	perspective: 1500px;
	transition: all 2s;
	z-index: 1;
	margin: 0 -10px;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-left-slide img.shadow {
	position: absolute;
	bottom: 4px;
	filter: brightness(0%);
	opacity: .3;
	transform: rotateX(74deg) skewX(-20deg);
	transform-origin: bottom;
	left: 5px;
	width: 100%;
	margin-left: -10px;
	transition: all 2s;
	z-index: -1;
}

@media screen and (min-width: 576px) {
	.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-left-slide img.shadow {
		bottom: 12px;
	}
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-left-slide:hover {
	transform: translateX(-50%);
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-left-slide:hover img.shadow {
	transform: rotateX(74deg) skewX(-30deg);
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-middle-bar {
	position: relative;
	z-index: 1;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-middle-gate {
	position: relative;
	perspective: 1500px;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-middle-gate img {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 21%;
	width: 60%;
	transform-origin: left center;
	transform-style: preserve-3d;
	transition: all 0.8s;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-middle-gate img.shadow {
	transform-origin: left center;
	transform-style: preserve-3d;
	bottom: 4px;
	filter: brightness(0%);
	opacity: .3;
	position: absolute;
	z-index: 0;
	left: 26px;
}

@media screen and (min-width: 576px) {
	.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-middle-gate img.shadow {
		left: 34px;
	}
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-middle-bar > img {
	position: relative;
	z-index: 1;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-middle-bar:hover .eb-middle-gate {
	position: relative;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-middle-bar:hover .eb-middle-gate img {
	transform: rotateX(1deg) rotateY(50deg) skewX(0);
	z-index: 1;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-middle-bar .eb-middle-gate img.shadow {
	z-index: -1;
	position: absolute;
	bottom: 4px;
	filter: brightness(0%);
	opacity: .3;
	transform: rotateX(74deg) skewX(-10deg);
	transform-origin: bottom;
	margin-left: -10px;
	transition: all 0.8s;
}

@media screen and (min-width: 576px) {
	.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-middle-bar .eb-middle-gate img.shadow {
		bottom: 12px;
	}
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-middle-bar:hover .eb-middle-gate img.shadow {
	transform: rotateX(74deg) skewX(-14deg) skewY(18deg) rotateY(-10deg);
	left: 10px;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-slide-gate-left {
	position: relative;
	perspective: 1500px;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-slide-gate {
	display: flex;
	margin-left: -12px;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-slide-gate .eb-slide-gate-left img,
.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-slide-gate .eb-slide-gate-right img {
	transition: all .8s;
	position: relative;
	z-index: 2;
	transform-origin: left center;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-slide-gate-left img.shadow {
	position: absolute;
	transform-origin: left center;
	transform-style: preserve-3d;
	bottom: 5px;
	filter: brightness(0);
	opacity: .3;
	z-index: -1 !important;
	width: 100%;
	max-height: 20%;
    transform: translateX(-220px)
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-slide-gate-right {
	position: relative;
	perspective: 1500px;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-slide-gate .eb-slide-gate-right img {
	transform-origin: right center;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-slide-gate:hover .eb-slide-gate-left img {
	transform: rotateX(-5deg) rotateY(50deg);
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-slide-gate:hover .eb-slide-gate-left img.shadow {
	transform: rotateX(1deg) rotateY(50deg) skewX(7deg) translateX(-220px);
	transform-origin: left center;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-slide-gate:hover .eb-slide-gate-right img {
	transform-origin: right center;
	transform: rotateX(-5deg) rotateY(-50deg);
	z-index: 2;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-slide-gate:hover .eb-slide-gate-right img.shadow
{
	transform: rotateX(1deg) rotateY(-50deg) skewX(7deg) translateX(-200px);
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-slide-gate-right img.shadow{
	position: absolute;
    /* transform: rotateX(90deg); */
    transform-origin: right bottom;
	transform-style: preserve-3d;
    bottom: 5px;
    filter: brightness(0);
    opacity: .3;
    z-index: -1 !important;
	width: 100%;
	max-height: 20%;
    transform: translateX(-200px); 
}
.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-last-image img {
	position: relative;
	z-index: 3;
}




/* Version 2 images — your sizing rules */
.banner-experiment-11-combined .eb-wrapper img:not(.shadow) {
	max-height: 15vw;
	min-height: 15vw;
}

/* ---- 1920px scaling (YOU SAID TO KEEP IT) ---- */
@media (min-width: 1920px) {
	.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-middle-bar {
		transform: scaleX(1.02);
	}
	.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-left-slide {
		transform: scaleX(1.04);
	}
	.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-slide-gate {
		transform: scaleX(1.01);
	}
	.banner-experiment-11-combined .eb-wrapper img:not(.shadow) {
		max-height: 13vw;
		min-height: 13vw;
	}
}

/* BACKGROUND IMAGE — USED */
.banner-experiment-11-combined .experiment-img {
	width: 100vw;
	height: 100%;
}

.banner-experiment-11-combined .experiment-img img {
	width: 100vw;
	height: 100%;
	object-fit: cover;
}


.banner-experiment-11-combined .experiment-background {
    position: relative;
    width: 100%;
    height: 900px;      
    overflow: hidden;
}
@media (max-width: 767px) {
    .banner-experiment-11-combined .experiment-background {    
    height: 500px;          
}
} 

/* BACKGROUND IMAGE */
.banner-experiment-11-combined .experiment-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-experiment-11-combined .experiment-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* FENCE WRAPPER */
.banner-experiment-11-combined .ebw-container {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.banner-experiment-11-combined .eb-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}


/* Version 2 specific styles (copied from your original) */
.banner-experiment-11-combined .experiment-background .eb-wrapper.two {
    display: flex;
    align-items: flex-end;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-first-image {
    z-index: 2;
}

.banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-left-slide {
    position: relative;
    perspective: 1500px;
    transition: all 2s;
    z-index: 1;
    margin: 0 -10px;	
}

/* ========= MOBILE / TABLET ADJUSTMENTS (<= 991px) ========= */
@media (max-width: 1200px) {

  /* Make the whole wrapper use the full width */
  .banner-experiment-11-combined .experiment-background .eb-wrapper.two {
    justify-content: space-between;
    width: 100%;
  }

  /* Each fence chunk (first image, left slide, middle bar, slide gate) 
     gets equal flex so they stretch across */
  .banner-experiment-11-combined .experiment-background .eb-wrapper.two > div {
    flex: 1 1 0;
  }

  /* Let the images fill their flex cell instead of being capped by vw height */
  .banner-experiment-11-combined .experiment-background .eb-wrapper.two > div img {
    width: 100%;
    height: auto;
    max-height: none;
  }

  /* Override the global vw-based height on small screens 
     so it doesn't constrain layout */
  .banner-experiment-11-combined .eb-wrapper img:not(.shadow) {
    max-height: none;
    min-height: 0;
  }

  /* Just in case: make sure the last image is gone under 991px */
  .banner-experiment-11-combined .experiment-background .eb-wrapper.two .eb-last-image {
    display: none;
  }
}


/* ============================================================
   MOBILE TAP BEHAVIOR — EXACT MIRROR OF HOVER ANIMATIONS
   ============================================================ */
@media (max-width: 1200px) {

  /* -----------------------
     LEFT SLIDE (the 2nd one)
     ----------------------- */
  .eb-left-slide.open img:not(.shadow) {
    transform: translateX(-50%) !important;
  }

  /* -----------------------
     MIDDLE BAR / MIDDLE GATE
     ----------------------- */
  .eb-middle-bar.open .eb-middle-gate img:not(.shadow) {
    transform: rotateX(1deg) rotateY(50deg) skewX(0) !important;
  }

  /* -----------------------
     SLIDE GATE (double-swing)
     ----------------------- */

  .eb-slide-gate.open .eb-slide-gate-left img { transform: rotateX(-5deg) rotateY(50deg) !important; }
.eb-slide-gate.open .eb-slide-gate-right img { transform: rotateX(-5deg) rotateY(-50deg) !important; }

}