.cards {
    margin: 0 auto;
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    grid-gap: 20px;
    font-family: oxygen;
}

.card { 
    box-shadow: 0 0 3px #6496Bc;
}

.card__image {
    width: 100%;

    display: block;
    border-radius: 8px;
}



.card__content > p:first-of-type {
    margin-top: 0;
}

.card__content > p:last-of-type {
    margin-bottom: 0;
}



/* Mobile phones */
@media (max-width: 600px) {
    .cards {
        grid-template-columns: 1fr;
    }
}

/* Tablets */
@media (min-width: 601px) and (max-width: 1024px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Laptops */
@media (min-width: 1025px) and (max-width: 1440px) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktops */
@media (min-width: 1441px) {
    .cards {
        grid-template-columns: repeat(4, 1fr);
    }
}