<main>
  <h2>Responsive Images with Plain HTML &amp; CSS</h2>
  
  <p>Resize the browser window. The image is sized in the HTML using the <code>width</code> and <code>height</code> attributes. The CSS ensures that it shrinks with the viewport on smaller devices.</p>
  
  <img src="https://www.codeinwp.com/wp-content/uploads/2021/09/leopard.png" alt="Leopard on a tree branch" width="1000" height="667">
  
  <p class="footer">Photo by <a href="https://unsplash.com/@aboeka">Gwen Weustink</a>.</p>
</main>

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

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

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;
}