.div_content{
width: 1750px;
}

.offers{
display: grid;
grid-template-columns: repeat(5,1fr);
grid-gap: 20px 20px;
}
.offers a{
border-radius: 20px;
overflow: hidden;
box-shadow: 0 13px 36px rgba(0,0,0,0.10);
transition: all 0.5s ease-out 0s;
}
.offers a:hover{
box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
}
.offers a>span{
display: block;
}
.offers a .spImg{
overflow: hidden;
}
.offers a .spImg img{
max-width: 100%;
height: auto;
transition: all 0.5s ease-out 0s;
}
.offers a:hover .spImg img{
transform: scale(1.1);
}
.offers a .title{
color: #1A1A18;
font-family: var(--gfont2-family);
font-size: 25px;
font-weight: 400;
display: block;
padding: 22px 50px 22px 25px;
box-sizing: border-box;
position: relative;
transition: all 0.5s ease-out 0s;
background-color: #FFFFFF;
}
.offers a:hover .title{
color: var(--g1-color);
}

.offers a .title:after, .offers a .title:before{
width: 40px;
height: 40px;
position: absolute;
right: 25px;
top:0;
bottom: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}


.offers a .title:after {
content: "arrow_forward";
font-family: 'Material Symbols Outlined';
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
font-size: 30px;
color: #FFFFFF;
}
.offers a .title:before{
content: '';
background-color: var(--g1-color);
border-radius: 50%;
}

@media screen and (max-width:1670px){
.offers a .title{font-size: 20px}
}
@media screen and (max-width:1480px){
.offers a .title:after,.offers a .title:before{width: 35px;
height: 35px;right: 15px}
.offers a .title::after{font-size: 25px}
}

@media screen and (max-width:1360px){
.offers{display: flex;
flex-wrap: wrap;
justify-content: center;
}
.offers a{
width: calc(33.333% - 20px);
max-width: 328px;
}
}

@media screen and (max-width:820px){
.offers a{
width: calc(50% - 20px);
}
}

@media screen and (max-width:550px){
.div_mod_offers .boxOffers .offers a .title {font-size: 17px;}
.div_mod_offers .boxOffers .offers a{width: calc(100% - 20px);}
}