widget-products-grid__heading span {
    border: 1px solid #20abad;
}

/* Mobile: Top Details -> Images -> Details */
@media (max-width: 991px) {
    .product-summary {
        display: flex;
        flex-direction: column; /* Stack items vertically */
    }

    /* This "unwraps" the children so they can interact with the Image div */
    .product-summary__details {
        display: contents; 
    }

    /* Now we assign the specific order */
    .product-summary__top-details {
        order: 1; /* First */
    }

    .product-summary__images {
        order: 2; /* Second */
    }

    .product-summary__lower-details {
        order: 3; /* Third */
    }
    .product-summary__contact-details {
        order: 4;
    }
}