Elementor - Custom Category Background Colors on Post Grid

style.css

/* See https://www.loom.com/share/eb7a5707d8b44038bde7886e3902ec11?sid=383b1a08-b755-4544-b372-446303907c48 for demo 
   See screeshot for HTML markup exmaple. This demo uses a custom loop. 
   https://www.evernote.com/shard/s20/sh/58ecb810-ad20-4b7c-84ac-17bb1dc94131/nliYiy0GKhDSkf-C-qOJUtYEymkTimGaVNc1PG_qaDajEPBuQPKBVSZGsA
*/

/* You can place this code under Appearance > Customize or in your child theme's style.css file */

/* category-blue, category-red, category-green are the names of the categories. 
   If your category name is "breakfast" then you would use category-breakfast instead.

   category-box is the custom CSS Class on the container that has the Post Meta widget in it that shows the category. 
   This is set in the Advanced tab of the container in Elementor.

   This concept can be applied to any post grid since all post grids have the name of the category the post is in
   listed in the CSS class of the HTML container for the post. 
*/

.category-blue .category-box {
   background-color: blue !important;
}

.category-red .category-box {
   background-color: red !important;
}

.category-green .category-box {
   background-color: green !important;
}