<main>
  <h2>Using the <code>&lt;picture&gt;</code> Element for Art Direction</h2>

  <p>Resize the viewport to see two different versions of the image, depending on the size of the viewport. In smaller viewports, the image is zoomed in on the image subject.</p>

  <picture>
    <source media="(min-width: 1000px)" srcset="https://www.codeinwp.com/wp-content/uploads/2021/09/chipmunk.png">
    <source media="(min-width: 800px)" srcset="https://www.codeinwp.com/wp-content/uploads/2021/09/chipmunk-zoom.png">
    <img src="https://www.codeinwp.com/wp-content/uploads/2021/09/chipmunk-closeup.png" alt="Chipmunk in a field on a rock" width="800" height="533">
  </picture>

  <p class="footer">Photo by <a href="https://unsplash.com/@_circadian_rhythm">Ryan Gagnon</a></p>

</main>

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

img {
  border: solid 2px black;
  max-width: 100%;
  height: auto;
}

.footer {
  text-align: center;
  font-size: 15px;
}

.footer a {
  color: firebrick;
}