abdullahtarawneh.com/assets/scss/components/pullquote.scss

@mixin pullquote {
	content: attr(data-pullquote);
	font-size: 1em;
	line-height: 1.4;
	display: flex;
	font-family: serif;
	color: #555;
	font-size: 1.25em;
}

@mixin left {
	float: left;
	max-width: 30ch;
	text-align: left;
}

@mixin right {
	float: right;
	max-width: 30ch;
	text-align: right;
}

.has-pullquote {
	&.left:before {
		@include pullquote;
		margin-bottom: 1rem;
		@media (min-width: 40rem) {
			@include left;
		}
		@media (min-width: 80rem) {
			margin-left: -9rem;
			padding-right: 1em;
		}
	}
	&.right:before {
		@include pullquote;
		margin-bottom: 1rem;
		@media (min-width: 40rem) {
			@include right;
		}
		@media (min-width: 80rem) {
			margin-right: -9rem;
			padding-left: 1em;
		}
	}
}