<div class="layout-wrapper">
  <nav class="cover-wrapper">
    <header class="page-header">
      <h1 class="headline">Arcade Life</h1>
    </header>
    <div class="page-sub">
      <div class="subhead-container">
        <h2 class="subhead">The next generation of arcade gamers top the leaderboard</h2>
      </div>
      <div class="article-meta">
        <svg id="author-avatar" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" width="80" height="80">
          <title id="avatarTitle">Author Avatar</title>
          <desc id="avatarDesc">A cartoon avatar of a smiling purple square on a blue background.</desc>
          <mask id="mask__beam" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36">
            <rect width="36" height="36" rx="72" fill="white"></rect>
          </mask>
          <g mask="url(#mask__beam)">
            <rect width="36" height="36" fill="#0ebeff"></rect>
            <rect x="0" y="0" width="36" height="36" transform="translate(6 6) rotate(192 18 18) scale(1)" fill="#754cac" rx="6"></rect>
            <g transform="translate(0 2) rotate(-2 18 18)">
              <path d="M13,19 a1,0.75 0 0,0 10,0" fill="white"></path>
              <rect x="12" y="14" width="1.5" height="2" rx="1" stroke="none" fill="white"></rect>
              <rect x="22" y="14" width="1.5" height="2" rx="1" stroke="none" fill="white"></rect>
            </g>
          </g>
        </svg>
        <p class="byline">by Penny Pen</p>
        <p class="dateline">June 21, 2021</p>
      </div>
    </div>
  </nav>
  <div class="section-1">
    <p class="article-tags">
      <span class="tag">culture</span>
      <span class="tag">games</span>
      <span class="tag featured glow">featured</span>
    </p>
    <p class="first-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quidem est minima quam! Laborum odit quidem earum perferendis eius laudantium perspiciatis similique deleniti delectus suscipit, cum corrupti facere reprehenderit esse.</p>
    <p>Animi aut, atque quibusdam similique distinctio enim iure, blanditiis rerum autem illum eum in. Dolorem quasi aspernatur nemo deserunt quo, libero dolore atque magni, ullam nihil corrupti et illo earum?</p>
    <p>Quos, ad? Et, iure. Officia fuga unde quibusdam nemo modi perspiciatis quisquam consectetur voluptates, dolore ab eaque voluptatem corporis placeat consequatur itaque qui asperiores. Consequuntur quas vitae animi est ea!</p>
    <p>Accusantium nemo labore corrupti laudantium! Quo reprehenderit ea perspiciatis temporibus! Illo sapiente harum fuga molestias temporibus iste animi. Velit, tenetur mollitia sit magni nulla quos veniam molestias consectetur aliquam eaque.</p>
    <p>Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit laboriosam voluptatum similique, fugit culpa enim! Suscipit labore odit porro assumenda, molestiae aperiam laboriosam explicabo nemo soluta facere sed libero magnam. Odio.</p>
  </div>
  <aside class="full-width-span">
    <p>"</p>
    <p>Quos, ad? Et, iure. Libero dolore atque magni.</p>
    <p>"</p>
  </aside>
  <div>
    <div class="section-2">
      <h2>High Scores &amp; High Drama</h2>
      <figure><img src="https://assets.codepen.io/t-1/cassidy-james-blaede-1lzJt360gkE-unsplash.jpg" alt="two people playing Guitar Hero Arcade. " />
        <figcaption>Photo by Cassidy James Blaede</figcaption>
      </figure>
      <!-- full size image: https://images.unsplash.com/photo-1536818968680-deeec2e9fd11-->
      <p>Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit laboriosam voluptatum similique, fugit culpa enim! Suscipit labore odit porro assumenda, molestiae aperiam laboriosam explicabo nemo soluta facere sed libero magnam. Odio.</p>
      <p>Animi aut, atque quibusdam similique distinctio enim iure, blanditiis rerum autem illum eum in. Dolorem quasi aspernatur nemo deserunt quo, libero dolore atque magni, ullam nihil corrupti et illo earum?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quidem est minima quam! Laborum odit quidem earum perferendis eius laudantium perspiciatis similique deleniti delectus suscipit, cum corrupti facere reprehenderit esse.</p>
      <p>Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit laboriosam voluptatum similique, fugit culpa enim! Suscipit labore odit porro assumenda, molestiae aperiam laboriosam explicabo nemo soluta facere sed libero magnam. Odio.</p>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id amet ad blanditiis vero delectus incidunt tempore reiciendis eius qui vel placeat reprehenderit, ut, dolore asperiores possimus impedit. Ipsum, culpa eaque!</p>
      <p>Velit vero esse quisquam accusantium? Dolore alias, quaerat quod excepturi officiis ipsa placeat officia necessitatibus illo, vero quasi esse aut. Doloremque nesciunt placeat animi saepe tempore aspernatur, officia vitae laudantium!</p>

    </div>
    <div class="section-2">
      <h2>Game Over?</h2>

      <p>Animi aut, atque quibusdam similique distinctio enim iure, blanditiis rerum autem illum eum in. Dolorem quasi aspernatur nemo deserunt quo, libero dolore atque magni, ullam nihil corrupti et illo earum?</p>

      <figure><img src="https://assets.codepen.io/t-1/element5-digital-dwcC-OJ-bRs-unsplash.jpg" alt="three neon-lit skee ball lanes. " />
        <figcaption>Photo by Element5 Digital</figcaption>
      </figure>

      <!-- full size image: https://images.unsplash.com/photo-1533236897111-3e94666b2edf -->

      <p>Velit vero esse quisquam accusantium? Dolore alias, quaerat quod excepturi officiis ipsa placeat officia necessitatibus illo, vero quasi esse aut. Doloremque nesciunt placeat animi saepe tempore aspernatur, officia vitae laudantium!</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quidem est minima quam! Laborum odit quidem earum perferendis eius laudantium perspiciatis similique deleniti delectus suscipit, cum corrupti facere reprehenderit esse.</p>
      <p>Aperiam est ab harum alias quae rem, cumque vero. Dolore possimus quas eius dolor voluptatibus cumque velit, ratione aspernatur voluptatem? Nulla voluptatem quaerat placeat error, ipsam alias dignissimos odit excepturi?</p>
      <p>Consectetur sed, itaque modi fugit asperiores similique maxime voluptatum incidunt labore vero cumque provident, deleniti nam? Molestiae impedit nostrum soluta quo iure, iste, nobis expedita minus ad officia dolor saepe.</p>
      <aside>
        <p>"</p>
        <p>Labore vero cumque provident, deleniti nam, cumque vero.</p>
        <p>"</p>
      </aside>
      <p>Consectetur sed, itaque modi fugit asperiores similique maxime voluptatum incidunt labore vero cumque provident, deleniti nam? Molestiae impedit nostrum soluta quo iure, iste, nobis expedita minus ad officia dolor saepe.</p>
      <p>Aperiam est ab harum alias quae rem, cumque vero. Dolore possimus quas eius dolor voluptatibus cumque velit, ratione aspernatur voluptatem? Nulla voluptatem quaerat placeat error, ipsam alias dignissimos odit excepturi?</p>
    </div>
  </div>
  <div class="section-3">

    <h2>Leveling Up</h2>
    <p>Animi aut, atque quibusdam similique distinctio enim iure, blanditiis rerum autem illum eum in. Dolorem quasi aspernatur nemo deserunt quo, libero dolore atque magni, ullam nihil corrupti et illo earum?</p>

    <figure><img src="https://assets.codepen.io/t-1/nick-jones-QTk3Llc-oKU-unsplash.jpg" alt="a person wearing a bucket hat, sitting on a skee ball machine lane. " />
      <figcaption>Photo by Nick Jones</figcaption>
    </figure>

    <!-- full size image: https://images.unsplash.com/photo-1601637155580-ac6c49428450-->

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quidem est minima quam! Laborum odit quidem earum perferendis eius laudantium perspiciatis similique deleniti delectus suscipit, cum corrupti facere reprehenderit esse.</p>
    <p>Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit laboriosam voluptatum similique, fugit culpa enim! Suscipit labore odit porro assumenda, molestiae aperiam laboriosam explicabo nemo soluta facere sed libero magnam. Odio.</p>
    <p>Animi aut, atque quibusdam similique distinctio enim iure, blanditiis rerum autem illum eum in. Dolorem quasi aspernatur nemo deserunt quo, libero dolore atque magni, ullam nihil corrupti et illo earum?</p>
    <p>Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit laboriosam voluptatum similique, fugit culpa enim! Suscipit labore odit porro assumenda, molestiae aperiam laboriosam explicabo nemo soluta facere sed libero magnam. Odio.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id amet ad blanditiis vero delectus incidunt tempore reiciendis eius qui vel placeat reprehenderit, ut, dolore asperiores possimus impedit. Ipsum, culpa eaque!</p>

    <figure><img src="https://assets.codepen.io/t-1/ersin-mandaliev-C5DC5bJhpRE-unsplash.jpg" alt="a person in black high-heeled boots sitting on an arcade basketball game. " />
      <figcaption>Photo by Ersin Mandaliev</figcaption>
    </figure>

    <!-- full size image: https://images.unsplash.com/flagged/photo-1556491168-3e6ffa3e26b2-->

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quidem est minima quam! Laborum odit quidem earum perferendis eius laudantium perspiciatis similique deleniti delectus suscipit, cum corrupti facere reprehenderit esse.</p>
    <p>Velit vero esse quisquam accusantium? Dolore alias, quaerat quod excepturi officiis ipsa placeat officia necessitatibus illo, vero quasi esse aut. Doloremque nesciunt placeat animi saepe tempore aspernatur, officia vitae laudantium!</p>

    <figure><img src="https://assets.codepen.io/t-1/nick-jones-g7jhzbd9WFQ-unsplash.jpg" alt="a person in a white t-shirt sitting on a wheel of fortune arcade game. " />
      <figcaption>Photo by Nick Jones</figcaption>
    </figure>

    <!-- full size image: https://images.unsplash.com/photo-1604112900927-e4d6d3ce3a2e -->

    <p>Asperiores cum quisquam voluptate adipisci nihil ipsa eum libero recusandae inventore facilis modi nulla, provident ut, ad explicabo magnam unde voluptates commodi.</p>
    <p>Consectetur sed, itaque modi fugit asperiores similique maxime voluptatum incidunt labore vero cumque provident, deleniti nam? Molestiae impedit nostrum soluta quo iure, iste, nobis expedita minus ad officia dolor saepe.</p>
    <aside>
      <p>"</p>
      <p>Labore vero cumque provident, deleniti nam, cumque vero.</p>
      <p>"</p>
    </aside>
    <p>Consectetur sed, itaque modi fugit asperiores similique maxime voluptatum incidunt labore vero cumque provident, deleniti nam? Molestiae impedit nostrum soluta quo iure, iste, nobis expedita minus ad officia dolor saepe.</p>
    <p>Aperiam est ab harum alias quae rem, cumque vero. Dolore possimus quas eius dolor voluptatibus cumque velit, ratione aspernatur voluptatem? Nulla voluptatem quaerat placeat error, ipsam alias dignissimos odit excepturi?</p>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: justify;
  color: #b8bad4;
  overflow-x: hidden;
  background-color: #040203;
}

.layout-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
  grid-auto-rows: minmax(150px, auto);
  grid-auto-flow: dense;
  grid-gap: 1em;
  break-inside: avoid;
}

.cover-wrapper {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  background: url(https://images.unsplash.com/photo-1533236897111-3e94666b2edf)
    center center / 100vw auto no-repeat fixed;
  height: 100vh;
  object-fit: contain;
}

.article-tags {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

.headline,
.subhead,
.article-meta,
aside,
h2 {
  font-family: "Chakra Petch", sans-serif;
  text-transform: uppercase;
}

figure,
img {
  width: 100%;
  max-width: 37.5rem;
}

figure {
  position: relative;
  margin: 0 auto;
}

img {
  position: relative;
  text-align: center;
  object-fit: contain;
  padding: 2rem 1rem;
}

figcaption {
  position: absolute;
  background-color: #000;
  color: #fff;
  font-size: 0.65rem;
  text-transform: uppercase;
  bottom: 0.75rem;
  left: 2.75rem;
  padding: 0.25rem;
}

.headline {
  font-weight: 700;
  font-size: 8rem;
  line-height: 8rem;
  text-align: center;
  color: rgb(250, 213, 255);
  text-shadow: 0.0625rem 0.0625rem 0.125rem black, 0.25rem 0.25rem 0 #fb3ae3,
    0.5rem 0.5rem 0 #5c0dfc, 0.75rem 0.75rem 0.125rem black;
}

.page-sub {
  background-color: #5c0dfc;
  padding: 3rem 0;
  margin-top: 2rem;

  /* https://codersblock.com/blog/creating-glow-effects-with-css/ */
  box-shadow: inset 60px 0 120px #f0f,
    /* left magenta */ inset -60px 0 120px #0ff; /* right cyan */
}

.subhead-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.subhead,
h2 {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #d7d9ff;
  margin-top: 2rem;
}

h2 {
  text-align: left;
}

.subhead {
  text-align: center;
}

.glow:hover {
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    box-shadow: 0 0 0.75rem #fb3ae3;
  }
  to {
    box-shadow: 0 0 1.5rem #fb3ae3;
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 0.75rem #fb3ae3;
  }
  to {
    box-shadow: 0 0 1.5rem #fb3ae3;
  }
}

.article-meta {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.8rem;
  margin: 0.75rem 0.5rem;
}

#author-avatar {
  height: 2rem;
  float: left;
}

.second-heading {
  margin-top: 3rem;
}

aside {
  color: #5c0dfc;
  padding: 4rem 3rem 0 3rem;
  font-size: 3.25rem;
  line-height: 3.25rem;
  text-align: center;
}

.full-width-span {
  grid-column: span 2;
  margin: 0;
}

.section-1 > p,
.section-2 > p,
.section-3 > p {
  padding-top: 1rem;
}

.section-1,
.section-2,
.section-3 {
  padding: 3rem;
  columns: 2 600px;
  column-gap: 4em;
  column-rule: 1px dotted #5c0dfc;
  column-fill: auto;
}

.section-2,
.section-3,
.full-width-span {
  padding-top: 0;
}

.section-3 > p:last-of-type {
  margin-bottom: 3rem;
}

.byline,
.dateline {
  padding-right: 1rem;
}

.tag {
  background-color: #5c0dfc;
  margin: 0.5rem 0.5rem 0.5rem 1rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  width: 100%;

  /* needed to center text due to below featured border */
  border: 2px solid #5c0dfc;
}

.featured {
  border: 2px solid #fb3ae3;
}

.first-paragraph::first-letter {
  font-family: "Chakra Petch", sans-serif;
  font-size: 5rem;
  padding: 1rem;
  margin-right: 0.25rem;
  float: left;
  color: #5c0dfc;
  font-weight: 900;
  text-shadow: 0.0625rem 0.0625rem 0.125rem black, 0.25rem 0.25rem 0 #0e028c;
}

@media (max-width: 61rem) {
  .layout-wrapper {
    display: flex;
    flex-flow: column nowrap;
  }

  .headline {
    font-size: 13vw;
    line-height: 8vw;
  }

  .tag {
    padding: 0.5rem;
    margin: 0.5rem;
  }

  .page-sub {
    padding: 0.5rem;
  }

  aside {
    font-size: 8vw;
    line-height: 8vw;
  }

  .section-2,
  .section-3 {
    padding: 0 3rem;
  }

  figure,
  img {
    width: 75vw;
    max-width: 75vw;
  }
}