Inside a loop, how to change CSS class based on category name?

What you need is post_class, a function that will add several classes linked to the post. You would use it in the main div around your loop and you can also add your own classes. In your case:

<div ?><?php post_class ("col-xl-3 col-lg-4 col-md-4 col-sm-6 n-container-sm") ?> >

This will add the category name as a class to the div, which you can then use in your css.

Related: also look into body_class.

EDIT: an addition

If you have an elaborate category hierarchy, you may want to base the classes on parent categories, because your users will be adding new categories (say ‘hiphop’ and ‘tango’ to the ‘videos’ category). In that case you will have to add some code to retrieve the parent categories and rewrite them into a certain format like this:

$all_cats = get_the_category ($post->ID);
$all_parents="";
foreach ($all_cats as $cat) {
    $all_parents .= get_category_parents ($cat, false, '-parent-cat ');
    }
$all_parents = strtolower ($all_parents);

Now you can add $all_parents to your post_class:

<div ?><?php post_class ($all_parents . " col-xl-3 col-lg-4 col-md-4 col-sm-6 n-container-sm") ?> >