.before-and-after-container {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
	row-gap: 30px;
}
.ba-container {
	display: grid;
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	--position: 50%;
}

.image-container {
	max-width: 100%;
}

.slider-image {
	width: 100%;
	height: 100%!important;
	object-fit: cover;
	object-position: left;
}

.image-before {
	position: absolute;
	inset: 0;
	width: var(--position);
	height: 100%!important;
}

.slider {
	position: absolute;
	inset: 0;
	cursor: pointer;
	opacity: 0;
	/* for Firefox */
	width: 100%;
	height: 100%;
}

.slider:focus-visible ~ .slider-button {
	outline: 5px solid black;
	outline-offset: 3px;
}

.slider-line {
	position: absolute;
	inset: 0;
	width: .2rem;
	height: 100%;
	background-color: #fff;
	/* z-index: 10; */
	left: var(--position);
	transform: translateX(-50%);
	pointer-events: none;
}

.slider-button {
	position: absolute;
	background-color: #fff;
	color: black;
	padding: .5rem;
	border-radius: 100vw;
	display: grid;
	place-items: center;
	top: 50%;
	left: var(--position);
	transform: translate(-50%, -50%);
	pointer-events: none;
	/* z-index: 100; */
	box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}
.ct-sub-title {
	color: #C62227;
	font-size: 18px;
	font-weight: 600;
}
@media(max-width: 600px){
	.before-and-after-container {
		grid-template-columns: 1fr;
		row-gap: 30px;
	}
}