.before-after {
 --position: 50%;
	position: relative;
	width: 100%;
	max-width: 600px;
	aspect-ratio: 4 / 3; /*4 / 3*/
	overflow: hidden;
	border-radius: 20px;
	isolation: isolate;
	height:100%;
}
/* Oba obrázky */
.before-after__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* PO obrázek je základ */
.before-after__image--after {
	z-index: 1;
}
/* PŘED obrázek je přes něj */
.before-after__before {
	position: absolute;
	inset: 0;
	width: var(--position);
	overflow: hidden;
	z-index: 2;
}
.before-after__before .before-after__image {
	/*
       Důležité:
       obrázek musí mít stejnou velikost jako celý kontejner,
       ne jako oříznutý div.
    */
    width: 100vw;
	max-width: 600px;
}
/* --------------------------------
   SLIDER
-------------------------------- */

.before-after__slider {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	z-index: 10;
}


/* --------------------------------
   DĚLICÍ ČÁRA
-------------------------------- */

.before-after::after {
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 left: var(--position);
 width: 3px;
 transform: translateX(-50%);
 background: white;
 z-index: 5;
 pointer-events: none;
}
/* --------------------------------
   OVLÁDACÍ KOLEČKO
-------------------------------- */

.before-after__handle {
	position: absolute;
	top: 50%;
	left: var(--position);
	width: 42px;
	height: 42px;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	border-radius: 50%;
	background: white;
	color: #276044;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
	z-index: 6;
	pointer-events: none;
}
.before-after__handle span {
	font-size: 24px;
	line-height: 1;
}
/* --------------------------------
   ŠTÍTKY PŘED / PO
-------------------------------- */

.before-after__label {
	position: absolute;
	top: 16px;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: white;
	z-index: 7;
	pointer-events: none;
}
.before-after__label--before {
	left: 16px;
	background: rgba(30, 30, 30, .75);
}
.before-after__label--after {
	right: 16px;
	background: #276044;
}
.before-after {
    touch-action: none;
}