/* Blocco news fisso - responsive */
.wrap-news{max-width:1480px; background:#a5b687; margin-inline:auto; padding:32px 16px;}
.wrap-news h1{font-size:clamp(1.25rem, 1rem + 1.5vw, 2rem); margin:0 0 24px; letter-spacing:.2px}

/* layout */
.grid-news{display:grid; gap:20px}
@media (min-width: 768px){
  .grid-news{grid-template-columns:1fr 1fr}
}

/* CAROUSEL */
.carousel{position:relative; overflow:hidden;}
.carousel-header{display:flex; align-items:center; justify-content:space-between; padding:14px 14px 0 14px; border-top:1px solid #ffffff;}
.carousel-title{font-weight:300; font-size:1.8rem; color:#fff;}
.viewport{position:relative; overflow:hidden; padding:14px 0}
.track{display:flex; transition:transform .35s ease; will-change:transform}
.slide{flex:0 0 calc(100% / 2); padding:15px;}
.card{position:relative; cursor:pointer; height:100%; background:#fff; border-radius:12px; overflow:hidden}
.stretched-link{position:absolute; inset:0; z-index:10; text-indent:-9999px; overflow:hidden;}
.stretched-link:focus-visible{outline:2px solid currentColor; outline-offset:2px;}
.media{aspect-ratio:16/7; width:100%; object-fit:cover; display:block}
@media only screen and (max-width: 767px) and (orientation: portrait){
  .media{aspect-ratio:16/12; width:100%; object-fit:cover; display:block}
}
.content{padding:12px}
.title{font-size:.98rem; font-weight:700; margin:8px 0 4px}
.excerpt{font-size:.9rem; padding:10px 0; line-height:1; color:#a7aaad;}
.corner-icon{position:absolute; right:5px; bottom:5px; display:inline-flex; padding:6px; border-radius:999px;}
.track:hover .slide{opacity:.5; transition:opacity .3s ease;}
.track:hover .slide:hover{opacity:1;}

/* arrows */
.controls{display:flex; justify-content:space-between; align-items:center;}
.car-arrow{position:relative; border:3px solid #a5b687; background:#fff; backdrop-filter:blur(6px); color:inherit; height:40px; width:40px; border-radius:999px; display:grid; place-items:center; cursor:pointer; transition:opacity .2s, transform .15s}
.car-arrow:hover{transform:scale(1.05)}
.car-arrow:active{transform:scale(.98)}
.car-arrow[disabled]{opacity:.35; pointer-events:none}
.car-arrow.prev{left:10px}
.car-arrow.next{right:10px}
.car-arrow svg{width:18px; height:18px}

/* dots */
.dots{display:flex; gap:6px; justify-content:center;}
.dot{width:20px; height:8px; border-radius:999px; background:#938c79; border:1px solid rgba(0,0,0,.1)}
.dot.is-active{background:#fff; width:35px; box-shadow:0 0 0 4px rgba(78,131,255,.12)}
.car-arrow:focus-visible{outline:2px solid #4e83ff; outline-offset:2px}
