How can I create a responsive image gallery using HTML only?

<!-- BEGIN COPY / PASTE -->
    <style>
      .gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .gallery figure {
        flex: 1 1 calc(33.333% - 10px);
        margin: 0;
      }
      .gallery img {
        width: 100%;
        height: auto;
        display: block;
      }
    </style>
    <div class="gallery">
      <figure>
        <img src="image1.jpg" alt="Description of Image 1">
      </figure>
      <figure>
        <img src="image2.jpg" alt="Description of Image 2">
      </figure>
      <figure>
        <img src="image3.jpg" alt="Description of Image 3">
      </figure>
      <!-- Add more images as needed -->
    </div>
    <!-- END COPY / PASTE -->