.con-wrap{ 
margin: auto; 
display: flex;   
flex-wrap: wrap;
flex-direction: row;  
justify-content: center; 
align-items: center;  
overflow: hidden;
}
.img-comp-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;  
}
.img-comp-img {
display: block;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden; 
}
.img-comp-container img{
object-fit: cover;
max-width: none !important;  
}
.img-comp-img img {
display: block;  
}
.img-comp-slider {
position: absolute;
z-index: 9;
cursor: ew-resize;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;  
border: none;  
box-shadow: 0 0 0 2px #ffffff;
} .img-comp-slider::before,
.img-comp-slider::after {
content: '';
position: absolute;
width: 1500px;
height: 2px; 
background-color: white; 
left: 0;
z-index: 1;
transform: rotate(90deg)
}
.img-comp-slider::before {
top: -752px;
left : -730px
}
.img-comp-slider::after {
bottom: -752px; 
left : -730px;
} .img-comp-slider.vertical::before,
.img-comp-slider.vertical::after {
content: '';
position: absolute;
width: 1800px;  
height: 2px; 
background-color: white;  
top: 50%; 
transform: translateY(-50%);  
z-index: 1;
}
.img-comp-slider.vertical::before {
left: -1800px;  
}
.img-comp-slider.vertical::after {
left: 40px;  
} .img-comp-slider i {
font-size: 14px;
color: #ffffff;
padding: 2px; 
}
.img-comp-slider.vertical {
position: absolute;
z-index: 9;
cursor: ns-resize;
width: 40px; 
height: 40px; 
background-color: transparent; 
display: flex;
flex-direction: column;  
align-items: center;
justify-content: space-between;  
transform: translatex(-50%, -50%);
box-shadow: 0 0 0 2px #ffffff;
}
.img-comp-slider.vertical i {
font-size: 14px;
color: #ffffff;
padding: 2px; 
}  .caption-bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.caption-top-left {
position: absolute;
top: 8px;
left: 16px;
}
.caption-center-left { 
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%); text-align: right;
white-space: nowrap;
}  .caption-top-right {
position: absolute;
top: 8px;
right: 16px;
}
.caption-bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.caption-center-right {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%); text-align: right;
white-space: nowrap;
}  .filter-blur img {
filter: blur(5px);
}
.filter-greyscale img {
filter: grayscale(100%);
}
.filter-contrast img {
filter: contrast(150%);
}
.filter-brightness img {
filter: brightness(120%);
}