3-column-preview-card-component using HTML5 and CSS3.

For the buttons, either change the box sizing to border box or have the border all the time and change the fill on hover. Right now, when I hover on the button, I see the height of the card changing and I think it's due to the border on hover.

Congratulations well done. Just a few pointers

• When using flexbox you don't need to add flex-direction: row; flexbox is by default set to row.
• You add font-family to all three cards, you don't have to do this. If you add font-family to the body it will apply to the entire page. So no need to repeat that.

/* set media to min-width */
@media (min-width: 375px) {
.container {
flex-direction: column;
max-width: 50rem;
margin: 20px;
}

.first {
/* border-top-right-radius: 10px;*/
/*border-bottom-left-radius: 0;*/
border-radius: 0 10px 0 10px; /* top-left, top-right, bottom-right, bottom-left */ 
}

.third {
/* see the comments above on how to short write border-radius */
border-top-right-radius: 0;
border-bottom-left-radius: 10px;
}
}

You need to fix something, when screen size goes under 375px it changes the card.