css code for help

<style>
/* Remove default padding/margin from page wrapper */
.page, .wrapper, .content {
  max-width: none !important;
  padding: 1 !important;
  margin: 1 !important;
}

/* Masonry-style gallery layout */
.gallery {
  column-count: 3;
  column-gap: 17px;
  padding: 18px;
  width: 100vw;
  box-sizing: border-box;
}

.image-card {
  break-inside: avoid;
  margin-bottom: 20px;
  display: inline-block;
  width: 100%;
}

.image-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.image-card p {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  color: #555;
}

/* Responsive columns */
@media (max-width: 1200px) {
  .gallery {
    column-count: 3;
  }
}

@media (max-width: 800px) {
  .gallery {
    column-count: 2;
  }
}

@media (max-width: 500px) {
  .gallery {
    column-count: 1;
  }
}
</style>

<div class="gallery">
  
    <div class="image-card">
      <img src="/blog/images/scream.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/acc.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/vietnam3.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/marie.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/DNA.gif" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/trump.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/Alan_Turing.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/Laser_speckle.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/Shakespeare.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/bacteriophage.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/hendrix.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/phenakistoscope.gif" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/911.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/pigs.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/fritzz.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/blade.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/chess.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/wallstreet.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/rosa.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/harvard.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/enigma.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/titan.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/hitlr.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/californication.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/evolution.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/bonaparte.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/atomic.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/marilyn.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/tiktaalik.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/mcdonalds.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/jesus.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/wars.gif" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/eiffel.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/microwave.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/indian.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/armstrong.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/campbells.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/jobs.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/pyramids.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/einstein.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/israel.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/spacex.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/mona.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/mario.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/sokrates.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/communist.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/gay.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/galileo.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/davinci.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/chaplin.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/boom.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/wtf.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/newton.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/rushmore.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/bruce.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/dino.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/ball.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/obama.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/greta.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/titanic.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/illuminati.png" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/quantumcomputer.jpg" alt="gallery image">
      
    </div>
  
    <div class="image-card">
      <img src="/blog/images/japanese.jpg" alt="gallery image">
      
    </div>
  
</div>