/* Desktop (default) — 4 columns */
.woocommerce div.product .related.products ul.products.columns-4 li.product {
    width: calc(100% / 4 - 16px) !important;
    margin-right: 8px;
    margin-left: 8px;
}

/* Tablets & large phones — 2 columns */
@media (max-width: 768px) {
    .woocommerce div.product .related.products ul.products.columns-4 li.product {
        width: calc(100% / 2 - 16px) !important;
        margin-right: 8px;
        margin-left: 8px;
    }
}

/* Small phones — 1 column */
@media (max-width: 480px) {
    .woocommerce div.product .related.products ul.products.columns-4 li.product {
        width: calc(100% - 16px) !important;
        margin-right: 8px;
        margin-left: 8px;
    }
}