.custom-video-block {
background-color: rgb(235, 235, 235);
padding: 20px;
max-width: 800px; /* 최대 너비를 설정 */
width: 100%; /* 부모 요소의 너비에 맞춤 */
border-radius: 20px;
margin: 10px auto;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
.custom-video-block-face {
background-color: rgb(235, 235, 235);
padding: 20px;
width: 40%;
border-radius: 20px;
margin: 10px auto;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.custom-video-block-person {
background-color: rgb(235, 235, 235);
padding: 20px;
width: 30%;
border-radius: 20px;
margin: 10px auto;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.video-compare-container {
display: inline-block;
line-height: 0;
position: relative;
width: 100%;
padding-top: 70%;
border-radius: 10px;
background: black;
overflow: hidden;
}
/* 두 번째 슬라이더는 9:9 비율 */
.video-compare-container-face {
display: inline-block;
line-height: 0;
position: relative;
width: 100%;
padding-top: 100%;
border-radius: 10px;
background: black;
overflow: hidden;
}

.video-compare-container-person {
display: inline-block;
line-height: 0;
position: relative;
width: 100%;
padding-top: 177.78%; /* 9:16 비율 */
border-radius: 10px;
background: black;
overflow: hidden;
}
.video-compare-container > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.video-compare-container-face video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.video-compare-container-person > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: inset(0 50% 0 0);
}

.slider-bar video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.slider-divider {
position: absolute;
top: 0;
left: 50%;
width: 3px;
height: 100%;
background-color: white;
transform: translateX(-50%);
z-index: 3;
pointer-events: none;
}