html {
  font-family: helvetica, sans-serif;
  font-size: 18px; }

h1 {
  font-family: 'BauerBodoniW01-BoldDisp', georgia, serif;
  font-size: 2rem;
  color: #fff;
  margin: 0;
  padding: 0.75em 0.25em;
  background: #2c2c2c;
  line-height: 1.1em; }

ul {
  padding: 0; }

li {
  list-style-type: none;
  font-weight: bold;
  font-size: 4rem;
  position: relative; }

li:focus {
  border: 10px solid blue; }

span {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); }

ul {
  /* autoprefixer: off */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  grid-gap: 1em;
  margin: 1em; }

li.highlight-box {
  grid-row: span 2;
  grid-column: span 2; }

li.highlight-tall {
  grid-row: span 2; }

li.highlight-wide {
  grid-column: span 2; }

img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  border: 1px solid black;
  -webkit-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
          box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5); }

.warning {
  color: red;
  font-size: 200%; }

@supports (display: grid) {
  .warning {
    display: none; } }