@media (max-width: 1100px) {

    .slider {
        border-radius: 8px;
    }

    .content {
        left: 20px;
        bottom: 20px;
    }

    .content h2 {
        font-size: 28px;
    }

    .nav {
        width: 45px;
        height: 45px;
        font-size: 24px;
    }

    .prev {
        left: 10px;
    }

    .next {
        right: 10px;
    }
}

.slider {
    position: relative;

    aspect-ratio: 900 / 310;

    overflow: hidden;
    border-radius: 12px;
}
.slider,
.slide,
.slide img {
    width: 100%;
    max-width: 100%;
}
.slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition: opacity 0.5s ease;
}

.slide.active{
    opacity:1;
    visibility:visible;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.overlay{
    position:absolute;
    inset:0;
	pointer-events:none;
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.8),
        rgba(0,0,0,0.2)
    );
}

.content{
    position:absolute;
    left:40px;
    bottom:40px;

    color:white;
    z-index:2;
}

.content h2{
    font-size:48px;
    margin-bottom:10px;
}

.nav{
    position:absolute;
    top:50%;
	z-index: 999;
    transform:translateY(-50%);
    width:60px;
    height:60px;
    border-radius:50%;
    border:2px solid white;
    background:rgba(255,255,255,0.1);
    color:white;
    font-size:32px;
    cursor:pointer;
}

.prev{
    left:20px;
}

.next{
    right:20px;
}