<main>
	<section>
		<aside class="pquote">
			<blockquote>
				<p>Tom Cruise is a performer who delivers mind-blowing performances time after time after time.</p>
			</blockquote>
		</aside>

		<article>
			<div>
				<p>Tom Cruise can act. Really act. There are movie stars that get by on charisma. Or muscles. Or via jokes. But Cruise is a performer who delivers mind-blowing performances time after time after time.</p>

				<p>Having debuted in ensemble flicks Taps and The Outsiders, he flashed that trademark grin in teen movies Risky Business and All the Right Moves. Became a superstar via Top Gun. Then went toe-to-toe with two of the all-time greats, holding his own opposite
					Paul Newman in The Color of Money, and Dustin Hoffman in Rain Man.</p>

				<p>Though he’s received just three Academy Award nominations, with not a win to his name, Cruise continues to challenge himself, delivering unforgettable performances in the likes of Magnolia, Collateral, Jerry Maguire, and Born on the Fourth of July.
					In between the many blockbusters…</p>
			</div>

			<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/img_placeholder_MagazineLayout2.png" alt="placeholder" height="auto" width="100%">
		</article>
	</section>
</main>
main {
	position: relative;
	left: 50%;
	transform: translate(-50%, 0);
	max-width: 790px;
	box-sizing: border-box;
	/*border: red 1px solid;*/
}
section {
	display: grid;
	margin-top: 60px;
	overflow: hidden;
}
.pquote {
	font-size: 41.1px;
	font-family: "Abril Fatface", cursive;
	line-height: 48.9px;
	letter-spacing: -1.2px;
	text-decoration: underline;
	word-spacing: 2px;
	color: #313131;
}
blockquote {
	margin: 59px 30px;
}
article {
	display: grid;
	font-family: "Open Sans", sans-serif;
}
article div p {
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.6px;
	margin: 16px 30px;
}
img {
	max-width: 355px;
	/*max-height: 306px;*/
	margin: 41px 0;
	justify-self: center;
}

/*--------------------------

     Media Queries 

--------------------------*/
/*    Mobile    */

@media only screen and (min-width: 320px) {
	/* 320px */
	section {
		width: 100%;
		grid-template-columns: 1fr;
	}
	article {
		grid-template-rows: 1fr auto;
	}
	.pquote {
		font-size: 41.1px;
	}
}

@media only screen and (min-width: 375px) {
	/* 375 */
}

@media only screen and (min-width: 414px) {
	/* 414 */
	.pquote {
		font-size: 51.1px;
		line-height: 58.9px;
	}
	blockquote {
		margin: 59px 40px;
	}
	img {
		width: 100%;
	}
}

@media only screen and (min-width: 568px) {
	/* 568 */
}

@media only screen and (min-width: 667px) {
	/* 667px */
}

@media only screen and (min-width: 736px) {
	/* 736px */
}

/*Tablet*/

@media only screen and (min-width: 768px) {
	/* 768 */
	section {
		grid-template-rows: minmax(320px, auto);
		grid-template-columns: 1fr 1fr;
	}
	blockquote {
		margin-top: 16px;
	}
	.pquote blockquote p {
		margin-top: 0;
	}
	article div p,
	img {
		margin-right: 16px 20px 16px 0;
	}
	img {
		/*width: 306px;*/
		width: 100%;
		margin-right: 20px;
	}
}

/*    Desktop    */

@media only screen and (min-width: 1024px) {
	/* 1024 */
	img {
		margin-right: 0;
	}
}

@media only screen and (min-width: 1140px) {
	/* 1140 */
}

@media only screen and (min-width: 1440px) {
	/* 1440 */
	.pquote {
		font-size: 61.1px;
		line-height: 69.9px;
	}
	/*article div p {
		margin: 16px 0;
	}*/
}

@media only screen and (min-width: 1662px) {
	/* 1662px */
}

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/main.css

External JavaScript

This Pen doesn't use any external JavaScript resources.