@media screen and (max-width: 600px) {
    #recipes > .card {
        width: calc(100% - 10px);
    }
}
@media screen and (min-width: 600px) and (max-width: 900px) {
    #recipes > .card {
        width: calc(50% - 10px);
    }
}
@media screen and (min-width: 900px) and (max-width: 1200px) {
    #recipes > .card {
        width: calc(33.333% - 10px);
    }
}
@media screen and (min-width: 1200px) and (max-width: 1500px) {
    #recipes > .card {
        width: calc(25% - 10px);
    }
}
@media screen and (min-width: 1500px) {
    #recipes > .card {
        width: calc(20% - 10px);
    }
}