/*
- https://www.w3schools.com/howto/howto_js_image_comparison.asp 
- https://stackoverflow.com/questions/52490350/image-comparison-slider-containers-wont-flex-wrap
*/

.img-comp-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.img-comp-container{
    position: relative;
    margin: 10px;
    /* flex: 30%; */
}

.img-comp-img {
    position: relative;
    width: auto;
    height: auto;
    overflow: hidden;
}

.img-comp-overlay {
    border-right: 2px solid rgba(51, 51, 51, 0.5);
    position: absolute;
    top: 0;
    left: 0;
}

.img-comp-slider {
    position: absolute;
    z-index: 9;
    cursor: ew-resize;
    /*set the appearance of the slider:*/
    width: 20px;
    height: 20px;
    background-color: #2196F3;
    opacity: 0.7;
    border-radius: 50%;
  }