@media (max-width: 768px) {
    .hero-slide-title {
        /* 1. Force the width to be the full screen width */
        width: 100vw ;
        max-width: 100vw ;
        
        /* 2. Center it and pull it to the very edges (The Breakout Trick) */
        position: relative ;
        left: 50% ;
        right: 50% ;
        margin-left: -50vw ;
        margin-right: -50vw ;
        
        /* 3. Reset height to auto so the image determines the height */
        height: auto ;
        min-height: 0 ;
        padding: 0 ;
    }

    /* 4. Make sure the image inside fills the new full-width space */
    .hero-slide-title img {
        width: 100% ;
        height: auto ; /* Keeps the natural height */
        display: block ;
        max-width: 100% ;
    }
}