@media (max-width: 767px) {
    /* 1. Force the row to behave as a flex container to align items perfectly */
    .row.visible-xs {
        display: flex !important;
        flex-wrap: wrap;
    }

        /* 2. Remove Bootstrap floats which cause jagged alignment gaps */
        .row.visible-xs .landing-col {
            display: flex;
            flex-direction: column;
            float: none !important;
            margin-bottom: -25px; /* Adds clean spacing between vertical rows */
        }

        /* 3. Force the image wrapper to a strict height */
        .row.visible-xs .product {
            height: 130px;
            overflow: hidden;
            margin-bottom: 5px;
        }

            /* 4. Ensure the image completely fills that 100px block cleanly */
            .row.visible-xs .product img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover;
            }

        /* 5. Give the titles a uniform box so text wrapping doesn't push elements */
        .row.visible-xs .landing-col > div:last-child {
            min-height: 34px;
        }
}