.meal-cards {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/**
 * Reset legacy defaults.
 */
.meal-cards {
    font-family: "Red Hat Text", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.meal-cards p {
    font-family: "Red Hat Text", Arial, sans-serif!important;
    font-size: 1em;
}

@media (max-width: 36em) {
    .meal-cards {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

.meal-cards__title--light {
    opacity: .25;
}