.img_2_3 {
    width: 100%;
    padding-bottom: 125%;
    position: relative;
    overflow: hidden;
}
.img_4_3 {
    width: 100%;
    padding-bottom: 75%;
    position: relative;
    overflow: hidden;
}
.img_16_9 {
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
    overflow: hidden;
}
.img_21_9 {
    width: 100%;
    padding-bottom: 30%;
    position: relative;
    overflow: hidden;
}
.img_square {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
}


.img_2_3 > img,
.img_4_3 > img,
.img_16_9 > img,
.img_21_9 > img,
.img_square > img,

.img_2_3 > video,
.img_4_3 > video,
.img_16_9 > video,
.img_21_9 > video,
.img_square > video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-position: center;
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    width: 100%;
}

/*** Image / Video Contain ***/
.img_2_3.contain_img,
.img_4_3.contain_img,
.img_16_9.contain_img,
.img_21_9.contain_img,
.img_square.contain_img {
    padding-bottom: 0 !important; /* important, to override custom padding settings in blocks */
}

.img_2_3.contain_img > img,
.img_4_3.contain_img > img,
.img_16_9.contain_img > img,
.img_21_9.contain_img > img,
.img_square.contain_img > img,

.img_2_3.contain_img > video,
.img_4_3.contain_img > video,
.img_16_9.contain_img > video,
.img_21_9.contain_img > video,
.img_square.contain_img > video {
    position: relative;
    transform: none;
    left: 0;
    top: 0;
    object-fit: unset;
}

.img_2_3.zoom > img,
.img_4_3.zoom > img,
.img_16_9.zoom > img,
.img_21_9.zoom > img,
.img_square.zoom > img {
    cursor: pointer;
    transition: ease all .3s;
    /* default image size */
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    width: 100%;
}
.img_2_3.zoom:hover > img,
.img_4_3.zoom:hover > img,
.img_16_9.zoom:hover > img,
.img_21_9.zoom:hover > img,
.img_square.zoom:hover > img {
    min-width: 103%;
    min-height: 103%;
    height: 103%;
    width: 103%;
}


.b_and_w__hover_image > img {
    filter: grayscale(1);
    transition: ease all 0.75s;
}
.b_and_w__hover_image:hover > img {
    filter: grayscale(0);
    min-width: 103%;
    min-height: 103%;
    height: 103%;
    width: 103%;
}

a.fill {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
