/* ======== START: CARD SET UP ======== */
@media (max-width: 768px) {
    .cards{
        margin: 0 auto !important;
        justify-content: center !important;
        padding-top: 1em;
    }
}


.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, auto));
    row-gap: 1em;
    column-gap: 1em;
    margin: 1em 1em; /* Center the grid and prevent large gaps */
    justify-content: start; /* Align cards to the left */
    align-items: start; /* Align cards at the top */
    text-align: center;
}
/* ======== END: CARD SET UP ======== */


/* ======== START: CARD STYLING ======== */
.card {
    background-color: rgb(209, 209, 209);
    color: var(--dark);
    transition: transform .4s ease-in-out;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    max-width: 400px;
    display: block;
    
}

.card > figure > img{
    height: 300px;
    width:400px;
}

@media (max-width: 768px)
{
    .card {
        height: fit-content;
    }
}

.card:hover { 
    transform: scale(1.01); 
}

.card__info{
    margin: 0 auto;
}

.card__info > header {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);

}

.btn {
    background-color: rgb(125, 170, 170);
    color: rgb(32, 25, 25);
    text-decoration: none;
    display: flex;
    justify-content: center;
    margin: 10px auto;
    text-align: center;
    font-weight: bold;
    transition: background-color .2s ease-in-out;
}

.btn:hover {
    color: white;
    background-color: rgb(70, 70, 70);
}
/* ======== END: CARD STYLING ======== */