HTML
<article>
<a href="https://geo.itunes.apple.com/us/movie/primer/id536457427?at=1l3vqFJ&ct=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Primer movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/primer.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/the-big-short/id1061320456?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="The Big Short movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/the-big-short.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/bottle-rocket/id315360821?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Bottle Rocket movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/bottlerocket.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/ex-machina/id983488795?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Ex Machina movie" class="grow aspect-ratio--4x6" style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/ex-machina.png) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/district-9/id331251689?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="District 9 movie" class="grow aspect-ratio--4x6 pv" style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/district9.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/watchmen-directors-cut/id321123507?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Watchmen movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/watchmen.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/sunshine/id272508664?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Sunshine movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/sunshine.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/mad-max-fury-road/id990549112?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Mad Max: Fury Road movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/mad-max-2.png) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/drive/id492170756?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Drive movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/neon-drive.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/kill-bill-volume-1/id432516627?at=1l3vqFJ&mt=6
" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Kill Bill: Volume 1 movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/kill-bill.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/kill-bill-volume-2/id432516575?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Kill Bill: Volume 2 movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/kill-bill2.png) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/from-dusk-till-dawn/id461537388?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="From Dusk Till Dawn movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/dusktilldawn.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/jurassic-park/id452283395?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Jurassic Park movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/jurassicpark.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/the-place-beyond-the-pines/id641999831?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="The Place Beyond The Pines movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/place-beyond-pines.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/children-of-men/id299968409?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Children Of Men movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/children.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/prometheus/id547496947?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Prometheus movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/prometheus.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/inglourious-basterds/id333325378?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Inglourious Basterds movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/inglourious_basterds.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/moon/id331842140?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Moon movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/moon.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/lock-stock-two-smoking-barrels/id281827014?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Lock, Stock & Two Smoking Barrels movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/lockstock.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/interstellar/id960891136?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Interstellar movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/interstellar.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/12-monkeys/id280241027?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="12 Monkeys movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/12monkeys.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/the-professional/id270815716?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Léon: The Professional movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/leon.png) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/the-departed/id284563157?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="The Departed movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/departed.jpg) no-repeat center center; background-size: cover;"></div>
</a>
<a href="https://geo.itunes.apple.com/us/movie/batman-begins/id271469254?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
<div role="img" aria-label="Batman Begins movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/batman-begins.jpg) no-repeat center center; background-size: cover;"></div>
</a>
</article>
css
.aspect-ratio--4x6 {
padding-bottom: 150%;
}
.fl {
float: left;
_display: inline;
}
.link {
text-decoration: none;
transition: color .15s ease-in;
}
.link:link, .link:visited {
transition: color .15s ease-in;
}
.link:hover {
transition: color .15s ease-in;
}
.link:active {
transition: color .15s ease-in;
}
.link:focus {
transition: color .15s ease-in;
outline: 1px dotted currentColor;
}
.w-50 {
width: 50%;
}
.overflow-hidden {
overflow: hidden;
}
.grow {
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
transform: translateZ(0);
transition: transform .25s ease-out;
}
.grow:hover, .grow:focus {
transform: scale(1.05);
}
.grow:active {
transform: scale(.9);
}
@media screen and (min-width: 60em) {
.w-25-l {
width: 25%;
}
}