<main class="avenir flex dark-gray justify-center vh-100">
  <article class="bg-near-white pa3 pa4-ns mw6 grid 📘">
    <h1 class="lh-title f5 f2-ns mv0 ph3 ph4-ns row-start-1 col-start-1 wide-2 flex items-center"> The New Technology and Human Values
    </h1>
    <h2 class="lh-title f6 f5-ns fw4 mt0 mb3 mb4-ns ttu tracked row-start-1 col-start-2 wide-1 flex items-end">
      John G. Burke
    </h2>
    <figure class="db bg-blue ma0 wide-2 tall-2">
      <svg viewBox="0 0 200 200" class="db h-100">
        <defs>
          <pattern id="pattern1" x="90" width="10" height="200" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="5" height="200" fill="#357EDD" />
            <rect x="5" y="0" width="5" height="200" fill="white" />
            <rect x="10" y="0" width="5" height="200" fill="#357EDD" />
            <rect x="15" y="0" width="5" height="200" fill="white" />
          </pattern>
          <pattern id="pattern2" x="95" width="10" height="200" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="5" height="200" fill="#357EDD" />
            <rect x="5" y="0" width="5" height="200" fill="white" />
            <rect x="10" y="0" width="5" height="200" fill="#357EDD" />
            <rect x="15" y="0" width="5" height="200" fill="white" />
          </pattern>
        </defs>
        <g>
          <circle cx="100" cy="100" r="95" fill="url(#pattern2)" />
          <circle cx="100" cy="100" r="90" fill="url(#pattern1)" />
          <circle cx="100" cy="100" r="85" fill="url(#pattern2)" />
          <circle cx="100" cy="100" r="80" fill="url(#pattern1)" />
          <circle cx="100" cy="100" r="75" fill="url(#pattern2)" />
          <circle cx="100" cy="100" r="70" fill="url(#pattern1)" />
          <circle cx="100" cy="100" r="65" fill="url(#pattern2)" />
          <circle cx="100" cy="100" r="60" fill="url(#pattern1)" />
          <circle cx="100" cy="100" r="55" fill="url(#pattern2)" />
          <circle cx="100" cy="100" r="50" fill="url(#pattern1)" />
          <circle cx="100" cy="100" r="45" fill="url(#pattern2)" />
          <circle cx="100" cy="100" r="40" fill="url(#pattern1)" />
          <circle cx="100" cy="100" r="35" fill="url(#pattern2)" />
          <circle cx="100" cy="100" r="30" fill="url(#pattern1)" />
          <circle cx="100" cy="100" r="25" fill="url(#pattern2)" />
          <circle cx="100" cy="100" r="20" fill="url(#pattern1)" />
          <circle cx="100" cy="100" r="15" fill="url(#pattern2)" />
          <circle cx="100" cy="100" r="10" fill="url(#pattern1)" />
          <circle cx="100" cy="100" r="5" fill="url(#pattern2)" />
        </g>
      </svg>
    </figure>
  </article>
</main>

.grid {
  display: grid;
}

.📘 {
  width: 100vh;
  height: calc(100vw * 6 / 4);
  max-height: 48rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
}

/**
 * Col and row spans
 */
.col-start-1 {
  grid-column-start: 1;
}
.row-start-1 {
  grid-row-start: 1;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-start-2 {
  grid-row-start: 2;
}

.wide-1 {
  grid-column-end: span 1;
}
.wide-2 {
  grid-column-end: span 2;
}

.tall-1 {
  grid-row-end: span 1;
}
.tall-2 {
  grid-row-end: span 2;
}

anime({
  targets: ['#pattern1 rect', '#pattern2 rect'],
  x: '-=10',
  easing: 'linear',
  duration: 2000,
  loop: true,
});