.box_mod_offer{
position: relative;
z-index: 2;
margin: 0 0 30px 0;
padding: 70px 0 120px 0;
}

.box_mod_offer .div_mod_offer{
width: 950px;
box-sizing: border-box;
max-width: 100%;
margin: 0 auto;
padding: 0 15px;
position: relative;
}

.box_mod_offer .div_mod_offer .content{
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 50px 36px;
}
.box_mod_offer .div_mod_offer .content a{
display: block;
text-align: center;
}
.box_mod_offer .div_mod_offer .content a img{
max-width: 100%;
height: auto;
transition: all 0.5s ease-out 0s;
}

.box_mod_offer .div_mod_offer .content a .spImg{
display: inline-block;
position: relative;
margin-bottom: 20px;
}
.box_mod_offer .div_mod_offer .content a .spImg:before{
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 8px;
background-color: #E0FFEC;
z-index: -1;
transition: all 0.5s ease-out 0s;
}

.box_mod_offer .div_mod_offer .content a:hover .spImg:before{
background-color: #000000;
}

.box_mod_offer .div_mod_offer .content a:hover img{
filter: brightness(0) invert(100%);
}

.box_mod_offer .div_mod_offer .content a .title{
color: #000000;
font-weight: 500;
font-size: 20px;
transition: all 0.5s ease-out 0s;
}


@media screen and (max-width:1200px){
.box_mod_offer .div_mod_offer .content{padding: 30px 0}
.box_mod_offer .div_mod_offer .content a .title{font-size: 17px}
}
@media screen and (max-width:1140px){
.box_mod_offer .div_mod_offer .content {grid-template-columns: repeat(4,1fr);}
}

@media screen and (max-width:840px){
.box_mod_offer .div_mod_offer .content {grid-template-columns: repeat(3,1fr);grid-gap: 20px 20px}
}
@media screen and (max-width:570px){
.box_mod_offer .div_mod_offer .content {grid-template-columns: repeat(2,1fr);}
}

@media screen and (max-width:410px){
.box_mod_offer .div_mod_offer .content {grid-template-columns: 1fr;}
}