.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, auto));
    gap: 1rem;

}


.card {
    background-color: var(--color-background);
    width:296px;
    height:343px;
    overflow:hidden;
    border-radius:10px;
    border:1px solid var(--color-dark);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin:10px;
}

.img-card {
    background-color: var(--color-background);
    width:296px;
    height:auto;
    overflow:hidden;
    border-radius:10px;
    border:1px solid var(--color-dark);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card:hover,.img-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
    transform: scale(1.02);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.img-card:active,.card:active {
    transform: scale(0.98);
}

.card__info {
    padding:10px;
}

.card__info > header{
    color: var(--color-main);
    border-bottom:2px solid var(--color-main);
    padding-bottom: 10px;
    margin-bottom:10px;
}

@media (max-width: 700px)
{
    .card{
        height: min-content;

    }
}

.card-image-height{
    height:120px ;
}