Code to create Image size and restyle CSS

This php snippet will:

1) add the image size you want for fx Related Posts if needs be
2) make these images available in Gutenberg

// Add Custom Images to Gutenberg
add_filter( 'image_size_names_choose','wpmudev_custom_image_sizes' );

function wpmudev_custom_image_sizes( $sizes ) {
return array_merge( $sizes, array(

// Add your custom sizes here
'rise-home-project' => __( '400x400px croped' ),
'rise-home-blog' => __( '400x250px croped' ),
'related-posts-thumb' => __( '400x100px croped' ),
'woocommerce_thumbnail' => __( '500x500px croped' ),
'slides-front' => __( '1200x750px croped' ),
) );
}

// Define Custom Images

// Slides format
add_image_size( 'slides-front', 1200, 750, array( 'center', 'center' )); // Hard crop X: left,center,right Y: top,center,bottom

// Related Posts
add_image_size( 'related-posts-thumb', 400, 150, array( 'center', 'center' )); // Hard crop X: left,center,right Y: top,center,bottom

This php snippet will tell Related posts to grab another image than the square:

//* Modify related posts image size
function rp4wp_example_my_thumbnail_size( $thumb_size ) {
	return 'related-posts-thumb';
}

add_filter( 'rp4wp_thumbnail_size', 'rp4wp_example_my_thumbnail_size' );

This CSS code will style Related Posts in a horizontal line similar to Jetpack, and add the opacity effect to the images. For screen below 500px, they will display full width.

.rp4wp-related-posts ul {
    width:100%;
    padding:0;
    margin:0;
}
.rp4wp-related-posts ul>li {
    list-style:none;
    padding:0;
    margin:0;
    padding-bottom:20px;
    clear:both;
}
.rp4wp-related-posts ul>li>p {
    margin:0;
    padding:0;
}
.rp4wp-related-post-image {
    width:100%;
    padding:0;
    float:none;
    margin-bottom: 10px;
    opacity: 0.3 !important;
}

.rp4wp-related-post-image:hover {
    transition: .8s ease;
    opacity: 1 !important;
}

.rp4wp-related-posts ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-gap: 10px;
    }

@media only screen and (max-width: 500px){
.rp4wp-related-posts ul {
    width: 100%;
  }
}