<main>
      <article>
        <h1>Some Awesome Article</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum quae
          dicta ipsam itaque ad! Assumenda facilis reiciendis tenetur!
          Doloremque ratione, temporibus. Quam consequatur cumque consectetur
          natus beatae ratione culpa doloribus.
        </p>
        <p>
          Repudiandae aliquid quaerat doloribus, ullam nemo rerum obcaecati
          autem blanditiis maxime dignissimos modi velit officia rem odit ea
          labore, quibusdam iusto pariatur fugit nisi tempore, earum dolores hic
          ut. Quidem.
        </p>
        <p>
          Expedita in, voluptas quasi earum aliquid nemo dolore consectetur
          officia ullam quas quos consequatur error soluta et quo perspiciatis
          qui saepe. Eaque quaerat delectus ab impedit facilis quibusdam.
          Repellendus, totam!
        </p>
        <figure>
          <img
            alt=""
            width="200"
            height="200"
            src="team-awesome.webp"
          />
        </figure>
        <p>
          Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Eum optio a
          nulla hic, consequatur nam quod nesciunt beatae, nihil deserunt
          molestiae, impedit voluptates dolorem saepe provident magni blanditiis
          iste quo?
        </p>
        <p>
          Facilis eligendi ea voluptas ipsam cupiditate blanditiis excepturi
          nostrum asperiores, velit, dicta quisquam dolores repellat repellendus
          iusto accusantium odio fugiat aliquid eos. Consectetur quia minima
          placeat! Fugiat minus harum itaque.
        </p>
        <p>
          Minus provident voluptates ducimus cupiditate ullam iste voluptas
          quisquam, quibusdam dolore libero labore, exercitationem, quo
          veritatis, omnis repudiandae sequi sint? Ea nulla quam nobis rem
          aliquam laboriosam, aut doloribus nihil!
        </p>
        <figure>
          <img
            alt=""
            width="200"
            height="200"
            src="team-awesome.webp"
          />
          <figcaption>Shot of the CSS, UI, and DevTools Chrome DevRel team</figcaption>
        </figure>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto sed
          ipsum quis maiores sit possimus quam quos nobis, illum natus. Cum
          sequi, ipsum? Quae quis illo laudantium praesentium reiciendis,
          soluta.
        </p>
        <p>
          Unde at voluptatibus modi quaerat quam possimus corrupti dolore
          praesentium eligendi facere in ab, autem consectetur ea, vel minima
          quis molestias ad vitae cum ipsa, porro! Nostrum, harum, nesciunt.
          Veritatis.
        </p>
        <p>Thanks for reading!</p>
      </article>
    </main>

*,
*:after,
*:before {
	box-sizing: border-box;
}

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	font-family:  'Google Sans', sans-serif, system-ui;
}

figure:not(:has(figcaption)) {
	float: left;
	margin: var(--size-fluid-2) var(--size-fluid-2) var(--size-fluid-2) 0;
}

article {
	width: var(--size-content-3);
	padding: var(--size-fluid-4) 0;
}

article * + p {
	margin-top:  var(--size-fluid-2);
}

figure:has(figcaption) {
	width: 100%;
	margin: var(--size-fluid-4) 0;
}

figcaption {
	opacity:  0.65;
  text-align: center;
  width: 100%;
  margin: 0;
  max-inline-size: 100%;
  padding: var(--size-2);
}

figure:has(figcaption) img {
	width: 100%;
	aspect-ratio: 16/9;
	height: auto;
	object-fit: cover;
	object-position: center top;
}