* {
    box-sizing: border-box;
}

/* Grid Container */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 90%;
    min-width: 280px;
    margin: auto;
    /* margin with auto 
        used to center elements horizontally within their parent container. 
        It works only when the element has a defined width. 
    */
}

.card-body img {
    width: 65%;
    max-width: 768px;
    min-width: 200px;
    padding: 10px;
}

@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
    /* Media queries are used to apply different styles based on the screen size. 
        In this case, when the screen width is 768px or less, the grid changes to two columns. */
}