.offers_home{
background-color: #F0EBE5;
padding: 54px 0 60px 0;
}

.boxOffers{
width: 1430px;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
padding: 0 15px;
}
.divOffers{
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 40px 40px;
}
.divOffers a{
display: block;
overflow: hidden;
border-radius: 20px;
background-color: #FFFFFF;
max-width: 321px;
}
.divOffers a>span{
display: block;
}

.divOffers a>span.spImg{
position: relative;
overflow: hidden;
margin-bottom: 15px;
}
.divOffers a>span.spImg:after{
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iV2Fyc3R3YV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyMSAzNjEiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAzMC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMSBCdWlsZCAxMjMpICAtLT4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgZmlsbDogI2ZmZmZmZjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTEzOSwzNDUuMkM0Ni4xLDI5OS44LDE2LjYsMTY4LjQsNzMuMyw1Mi4yYzktMTguNSwxOS45LTM2LDMyLjYtNTIuMkgwdjM2MWgzMjF2LTM4LjRjLTM2LDI0LjktNzUuMywzOC4xLTExMy44LDM4LjEtMjMuNi4xLTQ3LTUuMi02OC4yLTE1LjVaIi8+Cjwvc3ZnPg==') 50% 50% no-repeat;
}

.divOffers a>span.spImg img{
max-width: 100%;
height: auto;
transition: all 0.5s ease-out 0s;
}
.divOffers a:hover>span.spImg img{
transform: scale(1.1);
}

.divOffers a>span.title{
padding: 0 30px;
margin-bottom: 15px;
box-sizing: border-box;
font-size: 21px;
font-weight: 600;
color: var(--g1-color);
}
.divOffers a>span.more{
padding: 0 30px;
margin-bottom: 25px;
font-size: 16px;
font-weight: 600;
color: var(--g1-color);
}
.divOffers a>span.more:after{
content: "arrow_forward";
font-family: "Material Symbols Rounded", serif;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
font-size: 28px;
width: 28px;
display: inline-block;
vertical-align: middle;
margin-left: 3px;
transform: rotate(-45deg);
transition: all 0.5s ease-out 0s;
}
.divOffers a>span.more:hover:after{
transform: rotate(0);
}

@media screen and (max-width:1250px){
.divOffers{display: flex;flex-wrap: wrap;justify-content: center}
.divOffers a{width: 50%}
}
@media screen and (max-width:700px){
.divOffers a{width: 100%}
}