.cards{
    padding: 40px 20px 0px 0px;
    gap: 20px;
}

.card{
    display: flex;
    align-items: flex-start;
    gap: 20px;

}

/* I'm struggling to find a way to make the thumbnail height stretch to the full height of the 
content and NOT just stretch to its full height.. */
.thumbnail {
    display: flex;
    width: 225px;
    max-height: 300px; /* This is a terrible solution but it'll do for now*/
    flex-direction: column;
    align-self: stretch;
    overflow: hidden;
}

.cover {
    object-fit: cover;
}

.cardcontent{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
}

.cardtext{
    padding: 10px 0px;
}

/* Represents a SINGLE category bubble */
.cardcategory{
    /*display: flex;*/
    flex-direction: row;
    text-align: center;
    width:fit-content;

    padding: 2px 8px;
    line-height: 0;

    border: 1px var(--pink);
    border-style: solid ;
    border-radius: 50px;
}