.carousel{position:relative;width:100%;margin:0 auto;box-sizing:border-box}
.carousel *{box-sizing:border-box}
.slider-container{width:100%;overflow:hidden;background:#1e2b3a}
.slider-wrapper{display:flex;flex-wrap:nowrap;transition:transform .4s cubic-bezier(0.2,0.9,0.3,1);will-change:transform}
.slide{flex:0 0 100%;aspect-ratio:16 / 9;background-color:#2c3e50}
.slide a{display:block;width:100%;height:100%;text-decoration:none;color:inherit}
.slide img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;pointer-events:none;background-color:#2c3e50}
.arrow{position:absolute;top:50%;transform:translateY(-50%);opacity:.5;width:48px;height:48px;background:#141e23b3;backdrop-filter:blur(4px);border:none;border-radius:40px;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:300;color:#fff;cursor:pointer;z-index:10;transition:all .2s ease;box-shadow:0 4px 10px #0003;line-height:1;padding-bottom:6px;user-select:none;outline:none}
.arrow:hover{background:#0a1419e6;transform:translateY(-50%) scale(1.05);box-shadow:0 8px 18px #0000004d}
.arrow:active{transform:translateY(-50%) scale(0.98);background:#000c}
.prev{left:12px}
.next{right:12px}
.dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;gap:16px;z-index:5}
.dot{width:12px;height:12px;background-color:#8f8d8b;border-radius:50%;cursor:pointer;transition:background-color .25s ease}
.dot:hover,.dot.active{background-color:#fff}
@media (max-width: 600px) {
.arrow{width:40px;height:40px;font-size:30px}
.prev{left:6px}
.next{right:6px}
.dots{bottom:10px;gap:12px}
}
.hover-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;padding:20px;max-width:1200px;margin:0 auto}
.hover-item{height:800px;aspect-ratio:7 / 9;cursor:pointer;overflow:hidden;border-radius:0}
.hover-item img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease}