main > img, main > video {
  max-width: 90vw;
}

@media (min-aspect-ratio: 16/11) {
  main.one {
    display: grid;
    grid-template-columns: 9fr 2fr;
  }

  main > img, main > video {
    max-width: 70vw;
    grid-row-start: 1;
    grid-row-end: 100;
  }

  main > p {
    grid-column-start: 2;
    grid-column-end: auto;
  }
}

@media (prefers-color-scheme: dark) {
  /*
   * https://ethanschoonover.com/solarized/
   */
  body {
    color: #fdf6e3;
    background: #002b36;
  }
  a {
    color: #2aa198;
  }
}

time, main > p > a {
  white-space: nowrap;
}

ol img, ol video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

li {
  display: inline;
  aspect-ratio: 1;
}

body > * {
  margin: 0 auto;
  padding: 5vw 5vw 0 5vw;
  width: 90vw;
}
body {
  text-rendering: optimizeLegibility;
  font-family: 'LatoLatinWebLight';
  font-size: 20px;
  font-weight: normal;
}
footer {
  padding-bottom: 5vw;
  font-size: 16px;
}
h1 {
  font-family: 'LatoLatinWebThin';
  font-size: 36px;
  font-weight: normal;
}

ol {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5vw;
}
body {margin: 0;}
@media (min-width: 52rem) {
  ol {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*
 * https://www.latofonts.com
 */

@font-face {
    font-family: 'LatoLatinWebThin';
    src: url('fonts/LatoLatin-Thin.woff2') format('woff2'),
         url('fonts/LatoLatin-Thin.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'LatoLatinWebLight';
    src: url('fonts/LatoLatin-Light.woff2') format('woff2'),
         url('fonts/LatoLatin-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}