body { font-family: Arvo; font-size: 120%; line-height: 1.4; text-align: center; margin: 0; }

h1 { line-height: 0.8; }
@media (min-width: 600px) { h1 { font-size: 5em; } }

h1, p { max-width: 800px; margin: .5em auto; }

p { padding: 0 .5em; }

a { white-space: nowrap; }

.tile-area { text-align: center; max-width: 1200px; margin: 0 auto; }

.tile { width: 320px; height: 200px; display: inline-block; position: relative; margin: 1em auto; }
@media (min-width: 400px) { .tile { margin: 2em; } }

.tile > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

svg { width: 100%; height: 100%; }

.cover rect { fill: #f4921e; }

.cover use { fill: #858585; }

.cover.invert rect { fill: #858585; }

.cover.invert use { fill: #f4921e; }