.content-wrapper.homepage-box.middle-banners-wrapper{
background:#fff!important;
}
.main-wrapper{
max-width:1616px;
margin:40px auto 0;
padding:0 30px;
position:relative;
}
.main-wrapper__title{
text-align:center;
font-size:24px;
font-weight:600;
color:#333;
margin:0 0 30px 0;
}
.main-banner__viewport{
overflow:hidden;
width:100%;
}
.main-banner__container{
display:flex;
gap:10px;
}
.main-banner{
width:calc((100% - 50px)/6);
background-color:#f6f2ed;
border-radius:10px;
flex-shrink:0;
overflow:hidden;
}
.main-banner__link{
display:flex;
flex-direction:column;
width:100%;
height:100%;
text-decoration:none;
color:inherit;
}
.main-banner__image{
width:100%;
height:180px;
padding:20px;
display:flex;
align-items:center;
justify-content:center;
}
.main-banner__image img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain;
}
.main-banner__title{
padding:0 20px 20px;
text-align:center;
font-size:15px;
font-weight:500;
color:#333;
min-height:45px;
display:flex;
align-items:center;
justify-content:center;
}
.prevArrow,
.nextArrow{
display:none;
position:absolute;
top:50%;
width:32px;
height:32px;
font-size:0;
border:none;
border-radius:50%;
background:transparent;
z-index:100;
cursor:pointer;
transform:translateY(-50%);
}
.prevArrow{
left:0;
}
.nextArrow{
right:0;
}
.main-wrapper .nextArrow::before,
.main-wrapper .prevArrow::before{
content:"e910"!important;
position:absolute;
top:0;
right:0;
padding:0!important;
width:32px!important;
height:32px;
background:none!important;
color:#dadada!important;
font-size:20px!important;
font-family:"shoptet";
font-weight:400;
line-height:1.5;
}
.main-wrapper .nextArrow::before{
content:"e910"!important;
}
.main-wrapper .prevArrow::before{
content:"e90f"!important;
}
@media (max-width:992px){
.main-banner__container{
overflow-x:scroll;
}
.main-banner__container::-webkit-scrollbar{
display:none;
}
.main-banner{
width:calc((100% - 20px)/2.5);
}
.main-banner__image{
height:150px;
}
}
@media (min-width:768px){
.main-wrapper{
padding:0 40px;
}
}
@media (max-width:500px){
.main-wrapper{
padding:0 20px;
}
.main-banner{
width:calc((100% - 10px)/1.5);
}
.main-banner__image{
height:120px;
}
.main-wrapper__title{
font-size:20px;
margin:0 0 20px 0;
}
}