Color block blog grid for Divi similar to IFTTT - Masonry & Equal Height

color-block-blog-grid-divi-ifttt

/*** FEATURED IMAGE STUFF ***/
.et_pb_image_container {
    margin: 0;
}
.et_pb_blog_grid .et_pb_image_container img {
    min-width: 100px;
    max-width: 100px;
    height: 100px;
    border-radius: 10px;
    object-fit: cover;
    margin: 20px;
}

/*** HIDE EXCERPT TEXT ***/
.et_pb_bg_layout_light .et_pb_post p,
.article .et_pb_bg_layout_light .et_pb_post p {
    display: none;
}

/*** POST META STUFF ***/
.et_pb_post .post-meta {
    display: block !important;
    padding-bottom: 0;
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 20px !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.et_pb_post .post-meta a {
    color: #fff !important;
}

/*** TITLE ***/
.et_pb_blog_grid h2 {
    padding: 20px;
    margin-top: 0;
    margin-bottom: 30px;
}

/*** MAKE THE GRID EQUAL HEIGHT INSTEAD OF MASONRY - OPTIONAL ***/
@media only screen and (min-width: 768px) {
    .et_pb_blog_grid h2 {
        min-height: 270px;
        /*** YOU WILL NEED TO PLAY WITH THIS NUMBER ***/
    }
}

/*** REMOVE BORDER AND ADD ROUNDED EDGES TO GRID ITEMS ***/
.et_pb_blog_grid .et_pb_post {
    padding: 0;
    border: none;
    border-radius: 12px;
}

/*** GRID BACKGROUND COLOR - REPLACE CATEGORY SLUGS WITH YOURS AND CHANGE THE COLORS ***/
.et_pb_blog_grid .et_pb_post.category-travel {
    background: #4A5899;
}
.et_pb_blog_grid .et_pb_post.category-wildlife {
    background: #559CAD;
}
.et_pb_blog_grid .et_pb_post.category-under-the-sea {
    background: #C1B2AB;
}
.et_pb_blog_grid .et_pb_post.category-food {
    background: #E8634E;
}

/*** MAKE GRID TIGHTER ***/
.et_pb_blog_grid .column.size-1of3 {
    width: 31.999% !important;
    margin-right: 2% !important;
}
.et_pb_blog_grid .column.size-1of3 .et_pb_post {
    margin-bottom: 7% !important;
}

/*** ADD CALENDAR ICON - OPTIONAL ***/
span.published:before {
    font-family: "ETmodules" !important;
    content: "\e023";
    margin-right: 4px;
}