@media (max-width: 767px) {
    .detail-dni-images-container {
        gap: 10px;             /* Tighter spacing for small screens */
    }

    #tires-spain-dni, 
    #tires-italy-dni {
        max-width: calc(50% - 10px); /* Keeps them side-by-side with gap room */
    }

    /* Reduce the vertical offset on mobile so it fits small displays nicely */
    #tires-italy-dni {
        transform: translateY(25px); 
    }

    #solargis-dni-scale {
        max-width: 90%;        /* Scales down the long color scale to fit phones */
        margin-top: 40px;      /* Adjusted for the smaller mobile offset */
    }
}