/*-------------------*/
/*-------------------*/
/*CARD*/
/*-------------------*/
/*-------------------*/
.card{
    display: flex;
    flex-direction: row;

    width: 100%;
    background-color: var(--clr-white);
    border-bottom: var(--clr-light) 1px solid;
    overflow: hidden;
}

.card .card-container{
    display: block;
    padding: 1rem 1rem 1rem 1rem;
}
.card .card-container > *{
    display: block;
}
.card .card-container > h1{
    font-size: 1.33rem;
    line-height: 1.5rem;
    font-weight: bolder;
    color: var(--clr-neutral);
    margin-bottom: 0.66rem;
}
.card .card-container p{
    color: var(--clr-light);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card .img{
    aspect-ratio: 4/3;
}
.card .img img{
    width: 100%;
    object-fit: cover;
    height: 100%;
}

@media (min-width:768px){
    .card{
        flex-direction: column;
        border-bottom: none;
        border-radius: 8px;
        box-shadow: 0px 1px 3px rgba(189, 151, 97, 0.44);
    }
    .card .card-container{
        padding: 0rem 1rem 1rem 1rem;
    }
    .card .img{
        margin-bottom: 1.33rem;
    }
    
}