<div class="content-wrapper mobile-wrapper">
  
<blockquote>
  <p>“It’s not enough to just sell to you today, I want to sell to you 20 years from now. When you take care of customers, they’ll be back.” </p>
  <cite>- Charles Gray</cite>
</blockquote>

</div> <!--/ content-wrapper mobile-wrapper -->
$brand-yellow: #E5B539;

.content-wrapper{
  width: 100%;
  max-width: 1024px;
  margin: 6em auto;
}

.mobile-wrapper{
	@media only screen and (max-width: 865px) {
		padding-left: 2%;
		padding-right: 2%;
	}
}

blockquote{
	border: 3px solid $brand-yellow;
	margin: 0 auto;
	padding-right: 0;
	padding-left: 20px;
	max-width: 636px;
	position: relative;
	p{
		font-family: Helvetica, Arial, Sans-Serif;
		font-size: 26px;
		font-weight: 700;
		padding: 0 34px;
	}
	&:before{
		content: '';
    display: block;
    position: absolute;
    width: 96%;
    top: -3px;
    left: 0;
    border: 3px solid white;
		position: inherit;
	}
	&:after{
		content: '';
		display: block;
		position: absolute;
		width: 96%;
		bottom: -3px;
		left: 0;
		border: 3px solid white;
		position: inherit;
	}
	cite{
		display: block;
    text-align: right;
		padding-right: 7%;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.