.rbr-layered-images {
	--rbr-accent-color: #017eb8;
	--rbr-accent-width: 52%;
	--rbr-accent-height: 94%;
	--rbr-accent-x: 0%;
	--rbr-accent-y: 0%;
	--rbr-accent-z: 1;
	--rbr-image-one-width: 86%;
	--rbr-image-two-width: 84%;
	--rbr-image-one-x: -2%;
	--rbr-image-one-y: 6%;
	--rbr-image-two-x: 10%;
	--rbr-image-two-y: -4%;
	--rbr-image-one-z: 2;
	--rbr-image-two-z: 3;
	--rbr-radius: 0px;
	--rbr-image-one-fit: cover;
	--rbr-image-two-fit: cover;
	--rbr-image-one-position: center center;
	--rbr-image-two-position: center center;
	--rbr-image-one-aspect: 16 / 9;
	--rbr-image-two-aspect: 16 / 9;
	--rbr-image-one-justify: start;
	--rbr-image-two-justify: end;
	--rbr-image-one-align: start;
	--rbr-image-two-align: end;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 1080px;
	margin-inline: auto;
	padding-block: clamp(18px, 4vw, 48px);
	position: relative;
	isolation: isolate;
	overflow: visible;
}

.rbr-layered-images *,
.rbr-layered-images *::before,
.rbr-layered-images *::after {
	box-sizing: border-box;
}

.rbr-layered-images__stage {
	display: grid;
	grid-template-areas: "stack";
	inline-size: 100%;
	min-block-size: clamp(320px, 48vw, 660px);
	position: relative;
}

.rbr-layered-images__accent {
	background: var(--rbr-accent-color);
	block-size: var(--rbr-accent-height);
	inline-size: var(--rbr-accent-width);
	position: absolute;
	z-index: var(--rbr-accent-z);
}

.rbr-layered-images--accent-position-center .rbr-layered-images__accent,
.rbr-layered-images--accent-position-custom .rbr-layered-images__accent {
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(calc(-50% + var(--rbr-accent-x)), calc(-50% + var(--rbr-accent-y)));
}

.rbr-layered-images--accent-position-top .rbr-layered-images__accent {
	inset-block-start: 0;
	inset-inline-start: 50%;
	transform: translate(calc(-50% + var(--rbr-accent-x)), var(--rbr-accent-y));
}

.rbr-layered-images--accent-position-bottom .rbr-layered-images__accent {
	inset-block-end: 0;
	inset-inline-start: 50%;
	transform: translate(calc(-50% + var(--rbr-accent-x)), var(--rbr-accent-y));
}

.rbr-layered-images--accent-position-left .rbr-layered-images__accent {
	inset-block-start: 50%;
	inset-inline-start: 0;
	transform: translate(var(--rbr-accent-x), calc(-50% + var(--rbr-accent-y)));
}

.rbr-layered-images--accent-position-right .rbr-layered-images__accent {
	inset-block-start: 50%;
	inset-inline-end: 0;
	transform: translate(var(--rbr-accent-x), calc(-50% + var(--rbr-accent-y)));
}

.rbr-layered-images__image {
	aspect-ratio: 16 / 9;
	grid-area: stack;
	margin: 0;
	max-inline-size: 100%;
	overflow: hidden;
	position: relative;
	border-radius: var(--rbr-radius);
	background: #f4f4f4;
}

.rbr-layered-images--has-shadow .rbr-layered-images__image {
	box-shadow: 0 24px 52px rgba(0, 0, 0, 0.22);
}

.rbr-layered-images__image--one {
	align-self: var(--rbr-image-one-align);
	aspect-ratio: var(--rbr-image-one-aspect);
	inline-size: min(100%, var(--rbr-image-one-width));
	justify-self: var(--rbr-image-one-justify);
	transform: translate(var(--rbr-image-one-x), var(--rbr-image-one-y));
	z-index: var(--rbr-image-one-z);
}

.rbr-layered-images__image--two {
	align-self: var(--rbr-image-two-align);
	aspect-ratio: var(--rbr-image-two-aspect);
	inline-size: min(100%, var(--rbr-image-two-width));
	justify-self: var(--rbr-image-two-justify);
	transform: translate(var(--rbr-image-two-x), var(--rbr-image-two-y));
	z-index: var(--rbr-image-two-z);
}

.rbr-layered-images__img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

.rbr-layered-images__image--one .rbr-layered-images__img {
	object-fit: var(--rbr-image-one-fit);
	object-position: var(--rbr-image-one-position);
}

.rbr-layered-images__image--two .rbr-layered-images__img {
	object-fit: var(--rbr-image-two-fit);
	object-position: var(--rbr-image-two-position);
}

.rbr-layered-images--siding-vertical-overlap {
	max-inline-size: 720px;
}

.rbr-layered-images--siding-vertical-overlap .rbr-layered-images__stage {
	min-block-size: clamp(420px, 64vw, 690px);
}

@media (max-width: 900px) {
	.rbr-layered-images {
		max-inline-size: 100%;
		overflow-x: clip;
		padding-block: clamp(10px, 4vw, 22px);
	}

	.rbr-layered-images__stage {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 16px;
		min-block-size: 0;
		padding-block: 16px 22px;
	}

	.rbr-layered-images__accent {
		block-size: calc(100% - 30px);
		inline-size: min(76%, 320px);
		inset-block-start: 15px;
		inset-inline-start: 50%;
		transform: translateX(-50%);
	}

	.rbr-layered-images__image,
	.rbr-layered-images__image--one,
	.rbr-layered-images__image--two {
		align-self: center;
		inline-size: min(94%, 560px);
		justify-self: center;
		transform: none;
	}

	.rbr-layered-images--mobile-reduced-overlap .rbr-layered-images__image--two {
		margin-block-start: -34px;
		transform: translateX(3%);
	}

	.rbr-layered-images--mobile-stacked .rbr-layered-images__image--two {
		margin-block-start: 0;
	}

	.rbr-layered-images--siding-vertical-overlap .rbr-layered-images__image--one,
	.rbr-layered-images--siding-vertical-overlap .rbr-layered-images__image--two {
		inline-size: min(92%, 480px);
	}
}