.animal-grid-list {width: calc(100% + 30px); margin-left: -15px;margin-bottom: -32px;}
.animal-grid-item {width: 25%; padding: 0 15px;margin-bottom: 32px;}
.animal-grid-box {width: 100%;height: 100%;position: relative;background-color: var(--sof-blue-dark);border-radius: 10px; overflow: hidden;}
.agb-img {position: relative;padding-bottom: 58%;height: 100%;}
.agb-img img {position: absolute; top: 0; left: 0; right: 0; bottom: 0;opacity: .3;transition: all .3s;mix-blend-mode: luminosity;}
.agb-title {position: absolute;top: 50%;left: 50%;width: 100%;text-align: center;transform: translate(-50%, -50%);}
.agb-title h5 {font-size: 40px; line-height: 1.35;letter-spacing: 0; font-weight: 700; text-transform: uppercase; color: var(--yellow); margin-bottom: 0; transition: all .3s;}
.animal-grid-box:hover {box-shadow: 10px 10px 20px rgb(0 0 0 / 30%);}
.animal-grid-box:hover .agb-img img {opacity: 1; scale: 1.1; mix-blend-mode: normal;}
.animal-grid-box:hover .agb-title h5 {color: var(--white);}

/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) {
    .agb-title h5 {font-size: 30px;}
}
/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) {
    .animal-grid-list {margin-bottom: -25px;}
    .animal-grid-item {width: 33.33%;margin-bottom: 25px;}
}
/* =================================================  
 ! Small devices (landscape phones, less than 768px)
 ================================================= */
@media (max-width: 767.98px){
    .agb-title h5 {font-size: 20px;}
}
/* ======================================================
 ! Extra small devices (portrait phones, less than 576px)
 ====================================================== */
 @media (max-width: 575.98px){
    .animal-grid-item {width: 50%;}
}