.slider-wrapper{ 
max-width: 1370px; 
margin: 0 auto; 
display: flex; 
align-items: center; 
/*gap:8px;*/
}
/* Arrow buttons */
.nav {
width: 40px;
height: 40px;
border-radius:6px;
border:none;
background:#111;
color:#fff;
font-size:18px;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
flex: 0 0 auto;
}
.nav[disabled] { opacity:0.35; cursor:default; }

/* Outer viewport that is the actual scroll container */
.viewport {
overflow-x: auto;              /* enable scrolling */
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
flex: 1 1 auto;
}

/* Hide native scrollbar: webkit, firefox, ie */
.viewport::-webkit-scrollbar { display: none; } /* Chrome, Safari, Edge (WebKit) */
.viewport { -ms-overflow-style: none; /* IE and Edge */ }
.viewport { scrollbar-width: none; /* Firefox */ }

/* Inner flex row that contains the items */
.track{
display: flex;
/*gap: 12px;*/
align-items: center;
/*padding: 8px;*/
/* ensure the track is as wide as needed for items */
width: -moz-fit-content;
width: fit-content;
}

/* Items */
.item {
background:#560002;
color:#fff;
padding:10px 16px;
white-space:nowrap;
flex: 0 0 auto; /* do not shrink, keep width based on content */
font-size:14px;
}
.item a{color:#fff;}
.item a:hover{color:#fff000;}

/* small responsive tweak */
@media (max-width:520px){
/*.nav{ width:34px; height:34px; font-size:16px; }*/
}