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

.box_mod_offer .div_mod_offer{
width: 1490px;
box-sizing: border-box;
max-width: 100%;
margin: 0 auto;
padding: 0 15px;
position: relative;
}
.box_mod_offer .div_mod_offer .content{
display: flex;
gap: 40px;
padding: 0 0 80px 0;
flex-wrap: wrap;
justify-content: center;
}
.box_mod_offer .div_mod_offer .content a{
display: block;
text-align: center;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 40px rgba(74,78,104);
position: relative;
width: calc(25% - 30px);
}
.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:hover img{
transform: scale(1.1);
}

.box_mod_offer .div_mod_offer .content a .title {
color: #FFFFFF;
font-weight: 700;
font-size: 24px;
transition: all 0.5s ease-out 0s;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
background-color: rgba(34,34,58,0.5);
text-align: center;
padding: 10px 0;
box-sizing: border-box;
}

.box_mod_offer .div_mod_offer .content a:hover .title{
color: var(--g1-color);
}

@media screen and (max-width:1200px){
.box_mod_offer .div_mod_offer .content{gap:20px}
.box_mod_offer .div_mod_offer .content a{width: calc(25% - 20px);}
}
@media screen and (max-width:1000px){
.box_mod_offer .div_mod_offer .content a{width: calc(33.333% - 20px);}
}
@media screen and (max-width:690px){
.box_mod_offer .div_mod_offer .content a{width: calc(50% - 20px);}
}
@media screen and (max-width:385px){
.box_mod_offer .div_mod_offer .content a{width: calc(100% - 20px);}
}