.hero-media{
    display:flex;
    justify-content:center;
    align-items:center;
}
.hero-media img{
    max-width: 100%;
    width: 500px;
    border-radius: 10px;
}
.slider{
    position:relative;
    width:100%;
    max-width:500px;
    height:340px;
    overflow:hidden;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.2);
    background:#fff;
}

.slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;      /* Fills the entire slider */
    object-position:center;/* Keeps image centered */
    opacity:0;
    transition:opacity 1s ease-in-out;
}

.slide.active{
    opacity:1;
}

.slide.active{
opacity:1;
}