Responsive 3-column preview card component

For the mobile design, I've added a media query that makes the --card-border-radius (defined in root and used for setting the border-radius of the first and last card) 0 when the width gets less than a predefined value (3*20rem = 60rem). Is this logic decent or can I do something better here to handle this?

I've used BEM syntax in the ColumnCard.scss file. However, I'm still not confident in its usage. Could you give me some pointers on my usage of elements and modifiers? Have I confused both these concepts?