How do I create a responsive image gallery using HTML and CSS?

<!-- BEGIN COPY / PASTE -->
    <div class="gallery">
      <div class="gallery-item">
        <img src="image1.jpg" alt="Image 1">
      </div>
      <div class="gallery-item">
        <img src="image2.jpg" alt="Image 2">
      </div>
      <div class="gallery-item">
        <img src="image3.jpg" alt="Image 3">
      </div>
      <!-- Add more images as needed -->
    </div>

    <style>
      .gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .gallery-item {
        flex: 1 1 calc(33.333% - 10px);
        box-sizing: border-box;
      }
      .gallery-item img {
        width: 100%;
        height: auto;
        display: block;
      }
      @media (max-width: 768px) {
        .gallery-item {
          flex: 1 1 calc(50% - 10px);
        }
      }
      @media (max-width: 480px) {
        .gallery-item {
          flex: 1 1 100%;
        }
      }
    </style>
    <!-- END COPY / PASTE -->