@media (max-width: 768px) {


    .hero-slider {
        height: 100vh; 
    }

    .slides,
    .slide {
        height: 100%;
    }

    .slide img {
        width: 100%;
        height: 100%;

        object-fit: cover; 
        object-position: center;

        transform: none;
    }

    .caption {
        position: absolute;
        left: 0;
        right: 0;
        top: 30%;
        transform: translateY(-50%);

        width: 100%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        text-align: center;
    }
}