Stuff for wrangling Jetpack. End result is along these lines: https://cldup.com/8x050WNF_L.png

template-file.php

<?php echo krogs_output_related_posts(); ?>

wrangle-jetpack-related-posts.css

#jp-relatedposts {

	#jp-relatedposts .jp-relatedposts-items-visual div.jp-relatedposts-post-thumbs p.jp-relatedposts-post-excerpt {
		display: block;
	}
	
	h3.related-posts-headline {
		font-size: 1em;
		text-align: center;
		margin-bottom: 2em;
		text-transform: uppercase;
		color: $blue;
		font-family: $sanstitles;
	}

	.jp-relatedposts-items-visual .jp-relatedposts-post {

		// set a max width equal to return image size, since there isn't a wrapper
		> * {
			max-width: 400px;
		}

		// remove opacity on posts
		opacity: 1;

		border: 1px solid $border;

		// remove underline
		&:hover .jp-relatedposts-post-title a {
			text-decoration: none;
		}

		// prevent weird padding on last post in row
		:last-child {
			padding-right: 0;
		}

		padding-right: 0; // overriding default jp
		width: 31%;
		margin: 1%;

		// try and create padding on stuff that's not the image :(
		> *:not(a.jp-relatedposts-post-a) {
			padding: 1em;
		}

		h4.jp-relatedposts-post-title {
			font-size: 1.25em;
			padding: 12px 16px 4px;
			font-size: 1.25em;
			font-weight: bold;
			font-family: $sanstitles;
			color: $darktext;
			a {
				color: $darktext;
			}
		}

		p {
			padding: 4px 16px;
			&.jp-relatedposts-post-context {
				margin-bottom: .75em;
			}
		}
	}
}

@media ( max-width: 50em ) { // override jetpack's breakpoint
	#jp-relatedposts {

		.jp-relatedposts-items-visual .jp-relatedposts-post {

			padding-right: 0; // overriding default jp
			width: 31%;
			margin: 1%;

			h4.jp-relatedposts-post-title {
				font-size: 1em;
			}

		}
	}
}

@media only screen and (max-width: 640px) {
	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n) {
		clear: none; // override Jetpack's clear left demands
	}
}

@media ( max-width: 30em ) {
	#jp-relatedposts {

		.jp-relatedposts-items-visual .jp-relatedposts-post {

			padding: 0;
			max-width: 400px;
			width: 100%;
			margin: 2em auto;

			h4.jp-relatedposts-post-title {
				font-size: 1.25em;
			}

		}
	}
}

wrangle-jetpack.php

<?php
/**
 * Sets up a function for altering Jetpack.
 *
 */
function krogs_custom_jetpack() {

	// related posts text
	add_filter( 'jetpack_relatedposts_filter_headline', 'krogs_related_posts_headline' );

	// jetpack fallback image
	add_filter( 'jetpack_images_get_images', 'krogs_custom_image', 10, 3 );

	// remove jetpack related posts, so we can put them where we want
	add_filter( 'wp', 'krogs_remove_related_posts_output', 20 );

	// custom image size for related posts
	add_filter( 'jetpack_relatedposts_filter_thumbnail_size', 'krogs_jetpack_related_posts_image_size' );
	
}

add_action( 'after_setup_theme', 'krogs_custom_jetpack' );

/**
 * @param $headline
 *
 * @return string
 */
function krogs_related_posts_headline( $headline ) {
	$headline = sprintf(
		'<h3 class="related-posts-headline">%s</h3>',
		esc_html( 'Related Articles' )
	);
	return $headline;
}


/**
 * @param $media
 * @param $post_id
 * @param $args
 *
 * @return array
 */
function krogs_custom_image( $media, $post_id, $args ) {
	if ( $media ) {
		return $media;
	} else {
		$permalink = get_permalink( $post_id );
		$default = get_template_directory_uri() . '/screenshot.png';

		$url = apply_filters( 'jetpack_photon_url', $default );

		return array( array(
			'type'  => 'image',
			'from'  => 'custom_fallback',
			'src'   => esc_url( $url ),
			'href'  => $permalink,
		) );
	}
}

/**
 * Remove Jetpack related posts, so we can insert them where we like
 */
function krogs_remove_related_posts_output() {
	if ( class_exists( 'Jetpack_RelatedPosts' ) ) {
		$jprp = Jetpack_RelatedPosts::init();

		$callback = array( $jprp, 'filter_add_target_to_dom' );

		remove_filter( 'the_content', $callback, 40 );
	}
}


/**
 * @param $size
 *
 * @return array
 */
function krogs_jetpack_related_posts_image_size( $size ) {

	$size = array(
		'width'  => 400,
		'height' => 200
	);

	return $size;
}

/**
 * Make our own output function, checking that the class exists so as not to show a shortcode if RP aren't enabled.
 * @return string
 */
function krogs_output_related_posts() {
	if ( class_exists( 'Jetpack_RelatedPosts' ) ) {

		return do_shortcode( '[jetpack-related-posts]' );

	}
}

Thanks for sharing Brian! I think there might be a typo on line 22 wrangle-jetpack.php https://gist.github.com/krogsgard/208c5d308219f4d1c043#file-wrangle-jetpack-php-L22

The function you are loading into after_setup_theme is krogs_setup but I believe the correct function should be krogs_custom_jetpack?

@colegeissinger good catch! I changed the names for the gist, and forgot that part :)