.d0scrollingwrapper {
    display: flex !important;
    overflow-x: scroll !important;
    overflow-y: hidden;
    gap: 0px; /* Removed gap so cards align perfectly edge-to-edge */
    padding: 10px 0;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
    
    /* Crucial: Enforces a snapping action so when a user scrolls, 
       it cleanly locks onto the next quote instead of stopping halfway */
    scroll-snap-type: x mandatory !important; 
}

/* Base styling for all devices (Mobile first) */
.d0scrollcard {
    /* Forces each card to be exactly 100% of the container width */
    flex: 0 0 100% !important;
    min-width: 100% !important;
    
    box-sizing: border-box;
    white-space: normal !important;
    scroll-snap-align: center !important; /* Tells the track where to snap the card */
    
    /* Breathing room inside the card so text doesn't touch the screen edge */
    padding: 30px 40px; 
    
    /* Clean look */
    background: #f8f9fa;
    border-radius: 8px;
border: 5px solid #FFFFFF;
}

/* Desktop Optimization */
@media (min-width: 1200px) {
    .d0scrollcard {
        /* Optional: If your design layout doesn't have a max-width container 
           and you want to limit the literal text width to 1200px on giant monitors */
        max-width: 1200px; 
        margin: 0 auto;
    }
}