HTML
<article class="cf pa3 mw9 center">
<header class="fl w-100 w-50-l pa3-m pa4-l mb3 mb5-l">
<h2 class="lh-title f3 b mt0">
Beginners and amateurs alike overestimate the importance of the
so-called brain wave, the sudden brilliant idea.
</h2>
</header>
<section class="fl w-100">
<div class="fl w-100 w-50-m w-25-l pa3-m pa4-l">
<p class="f6 lh-copy measure">
Perfect typography depends on perfect harmony between all of its elements.
Harmony is determined by relationships
or proportions. Proportions are hidden everywhere. words themselves.
</p>
</div>
<div class="fl w-100 w-50-m w-25-l pa3-m pa4-l">
<p class="f6 lh-copy measure">
True book design, therefore, is a matter of tact (tempo, rhythm,
touch) alone. It flows from something rarely appreciated today:
good taste. The book designer strives for perfection; yet every
perfect thing lives somewhere in the neighborhood of dullness and
is frequently mistaken for it by the insensitive. In a time that
hungers for tangible novelties, dull perfection holds no
advertising value at all.
</p>
</div>
<div class="fl w-100 w-50-m w-25-l pa3-m pa4-l">
<p class="f6 lh-copy measure">
In a masterpiece of typography, the artist's signature has been
eliminated. What some may praise as personal styles are in reality
small and empty peculiarities, frequently damaging, that masquerade
as innovations.
</p>
</div>
<div class="fl w-100 w-50-m w-25-l pa3-m pa4-l">
<p class="f6 lh-copy measure">
Only through constant practice and strictest self-criticism may we
develop a sense for a perfect piece of work. Unfortunately, most
seem content with a middling performance. Careful spacing of words
and the correct spacing of capital letters appear to be unknown or
unimportant to some typesetters, yet for him who investigates, the
correct rules are not difficult to discover.
</p>
</div>
</section>
<section class="fl w-100">
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(http://mrmrs.github.io/images/0008.jpg);" class="cover bg-center aspect-ratio--object"></span>
</div>
</div>
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(http://mrmrs.github.io/images/0012.jpg);" class="cover bg-center aspect-ratio--object"></span>
</div>
</div>
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(http://mrmrs.github.io/images/0045.jpg);" class="cover bg-center aspect-ratio--object"></span>
</div>
</div>
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(http://mrmrs.github.io/images/0051.jpg);" class="cover bg-center aspect-ratio--object"></span>
</div>
</div>
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(http://mrmrs.github.io/images/0018.jpg);" class="cover bg-center aspect-ratio--object"></span>
</div>
</div>
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(http://mrmrs.github.io/images/0019.jpg);" class="cover bg-center aspect-ratio--object"></span>
</div>
</div>
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(http://mrmrs.github.io/images/0038.jpg);" class="cover bg-center aspect-ratio--object"></span>
</div>
</div>
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(http://mrmrs.github.io/images/0011.jpg);" class="cover bg-center aspect-ratio--object"></span>
</div>
</div>
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(http://mrmrs.github.io/images/0004.jpg);" class="cover bg-center aspect-ratio--object"></span>
</div>
</div>
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(http://mrmrs.github.io/images/0002.jpg);" class="cover bg-center aspect-ratio--object"></span>
</div>
</div>
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(http://mrmrs.github.io/images/0020.jpg);" class="cover bg-center aspect-ratio--object"></span>
</div>
</div>
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(http://mrmrs.github.io/images/0013.jpg);" class="cover bg-center aspect-ratio--object"></span>
</div>
</div>
</section>
</article>
css
.aspect-ratio {
height: 0;
position: relative;
}
.aspect-ratio--3x4 {
padding-bottom: 133.33%;
}
.aspect-ratio--object {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.cover {
background-size: cover !important;
}
.bg-center {
background-repeat: no-repeat;
background-position: center center;
}
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.fl {
float: left;
_display: inline;
}
.b {
font-weight: bold;
}
.lh-title {
line-height: 1.25;
}
.lh-copy {
line-height: 1.5;
}
.mw9 {
max-width: 96rem;
}
.w-100 {
width: 100%;
}
.pa3 {
padding: 1rem;
}
.pv3 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.mb3 {
margin-bottom: 1rem;
}
.mt0 {
margin-top: 0;
}
.f3 {
font-size: 1.5rem;
}
.f6 {
font-size: .875rem;
}
.measure {
max-width: 30em;
}
.center {
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.w-50-m {
width: 50%;
}
.pa3-m {
padding: 1rem;
}
}
@media screen and (min-width: 60em) {
.w-25-l {
width: 25%;
}
.w-50-l {
width: 50%;
}
.pa4-l {
padding: 2rem;
}
.mb5-l {
margin-bottom: 4rem;
}
}