Our Teas Shortcode & css: http://squibbs.studioissa.com/our-teas/

functions.php

//For Teas Page Squibbs Iced Teas http://squibbs.studioissa.com/our-teas/
// Add Shortcode
function teas_insert_shortcode_first( $atts ) {

	// Attributes
	extract( shortcode_atts(
		array(
			'img' => '',
			'title' => '',
			'desc' => '',
			'link' => '',
		), $atts )
	);

	// Code
return '<div class="one-third first teas" ><li>
<figure class="tea-type-green">
<a href="' . $link . '" class="more"><div style="background-image: url(' . $img . '); background-repeat:no-repeat; background-position:center; background-size: 60%; height: 300px; width: 300px; margin: 0 auto;"></div></a>
</figure>
<article><div><h2>' . $title . '</h2><p>' . $desc . '</p></div><a href="' . $link . '" class="more"><span>See details</span></a></article></a></li></div>';
}
add_shortcode( 'tea_first', 'teas_insert_shortcode_first' );



// Add Shortcode
function teas_insert_shortcode( $atts ) {

	// Attributes
	extract( shortcode_atts(
		array(
			'img' => '',
			'title' => '',
			'desc' => '',
			'link' => '',
		), $atts )
	);

	// Code
return '<div class="one-third teas" ><li>
<figure class="tea-type-green">
<a href="' . $link . '" class="more">
<div style="background-image: url(' . $img . '); background-repeat:no-repeat; background-position:center; background-size: 60%; height: 300px; width: 300px; margin: 0 auto;"></div>
</a>
</figure>
<article><div><h2>' . $title . '</h2><p>' . $desc . '</p></div><a href="' . $link . '" class="more"><span>See details</span></a></article></li></div>';
}
add_shortcode( 'tea', 'teas_insert_shortcode' );

style.css

/*
For Teas Page Squibbs Iced Teas http://squibbs.studioissa.com/our-teas/
*/
.page-id-4 .gallery dd,
.page-id-4 .gallery dl dt a img {
  border: 0 solid #fff;
  border: none !important;
  color: #012b5c;
}

.teas {
  text-align: center;
}

.teas h2 {
  font-size: 1.4em;
  line-height: 1.2em;
  margin-bottom: 0.275em;
  /*font-style: italic;*/
  color: #31353F;
}

.teas p {
  font-size: .9em;
  color: #31353F;
  width: 60%;
  margin: 0 auto;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 300;
}

@media only screen and (max-width: 1023px) {
	.teas p {
		width: 100%;
	}
	
	figure a div {
		width: 243px !important;
	}

}

@media only screen and (max-width: 768px) {
	
	figure a div {
		width: 400px !important;
		height: 400px !important;
	}

}

@media only screen and (max-width: 480px) {
	
	figure a div {
		width: 300px !important;
		height: 300px !important;
	}

}



.teas span {
  font-size: 1.1em;
  color: #002b5c;
  top: .8rem;
  position: relative;
}

.teas span:before {
  content: '\f06c';
  color: #549933;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 0.9em;
  margin-right: 0.3333em;
  display: inline-block;
}