.custom-col {
    width: 24% !important;
    margin-bottom: 1rem; /* for spacing */
}

@media (min-width: 300px) {
    .custom-col {
        width: 99% !important; 
    }
}

@media (min-width: 400px) {
    .custom-col {
        width: 99% !important; 
    }
}
@media (min-width: 500px) {
    .custom-col {
        width: 99% !important; 
    }
}

@media (min-width: 900px) {
    .custom-col {
        width: 48% !important;  
    }
}

@media (min-width: 1200px) {
    .custom-col {
        width: 32% !important; /* 4 columns on extra-large screens */
    }
}
@media (min-width: 1600px) {
    .custom-col {
        width: 24% !important; /* 4 columns on extra-large screens */
    }
}