How can I create a responsive image gallery using HTML?

<!-- BEGIN COPY / PASTE -->
    <div class="gallery">
      <figure>
        <img src="image1.jpg" alt="Description of image 1">
        <figcaption>Image 1</figcaption>
      </figure>
      <figure>
        <img src="image2.jpg" alt="Description of image 2">
        <figcaption>Image 2</figcaption>
      </figure>
      <figure>
        <img src="image3.jpg" alt="Description of image 3">
        <figcaption>Image 3</figcaption>
      </figure>
    </div>
    <style>
      .gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      figure {
        flex: 1 1 calc(33.333% - 10px);
        box-sizing: border-box;
      }
      img {
        width: 100%;
        height: auto;
      }
    </style>
    <!-- END COPY / PASTE -->