:root{
    --gap: 22px;
    --radius: 14px;
  }

  .gallery-container{
    width:100%;
    max-width:1260px;
    margin:0 auto;
    padding: 5% 0% 10% 0%;
  }
  .gallery-heading{
    display: flex;
    justify-content: center;
    margin-bottom: 5%;
  }
  /* Gallery wrapper (flex-based "masonry-like" layout) */
  .it-gallery-thumb-wrap{
    display:flex;
    gap:var(--gap);
    align-items:flex-start;
    justify-content:center;
    flex-wrap:wrap;
  }

  /* Each column box - contains two thumbnails stacked */
  .it-gallery-thumb-box{
    display:flex;
    flex-direction:column;
    gap:var(--gap);
    /* default 1 column on very small screens -> full width */
    flex: 0 0 100%;
  }

  /* Different box shapes/sizes to create the staggered look */
  .box-style-1 { flex-basis: 14%; }  /* narrow tall */
  .box-style-2 { flex-basis: 22%; }  /* medium */
  .box-style-3 { flex-basis: 18%; }  /* medium narrow */
  .box-style-4 { flex-basis: 28%; }  /* wide tall */
  .box-style-5 { flex-basis: 16%; }  /* narrow */

  /* Make boxes shrink/grow nicely while keeping the layout */
  .it-gallery-thumb-box { min-width:120px; }

  /* Each thumb container (controls height, overflow and radius) */
  .it-gallery-thumb{
    position:relative;
    overflow:hidden;
    border-radius: var(--radius);
    background: #f0f6f5;
    box-shadow: 0 25px 70px rgb(174 255 238);
    border: 5px solid #ffffff;
  }
   /* .it-gallery-thumb::after{
    content: "";
    width: 100%;
    height: 100%;
    background: #01423b59;
    position: absolute;
    right: 0px;
    bottom: 0px;

 } */

  /* Two thumb variants (top/ bottom) — change heights to produce variety */
  .it-gallery-thumb.style-1{ height: 260px; } /* larger card */
  .it-gallery-thumb.style-2{ height: 150px; } /* smaller card */

  /* Image rules */
  .it-gallery-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition: transform .6s ease;
  }
  .it-gallery-thumb:hover img{
    transform:scale(1.06);
  }

  /* Responsive breakpoints - adjust how many columns and heights */
  @media (max-width: 1200px){
    .box-style-1 { flex-basis: 16%; }
    .box-style-2 { flex-basis: 24%; }
    .box-style-3 { flex-basis: 20%; }
    .box-style-4 { flex-basis: 30%; }
    .box-style-5 { flex-basis: 18%; }

    /* slightly reduce heights */
    .it-gallery-thumb.style-1{ height:220px; }
    .it-gallery-thumb.style-2{ height:140px; }
  }

  @media (max-width: 900px){
    /* Simpler layout: 2-3 columns-ish */
    .box-style-1,
    .box-style-2,
    .box-style-3,
    .box-style-4,
    .box-style-5 { flex-basis: 48%; }
    .it-gallery-thumb.style-1{ height:200px; }
    .it-gallery-thumb.style-2{ height:120px; }
  }

  @media (max-width: 600px){
    /* single column on small devices */
    .it-gallery-thumb-wrap { gap:18px; }
    .it-gallery-thumb-box { flex-basis: 100% !important; width:100%; }
    .it-gallery-thumb.style-1{ height:220px; }
    .it-gallery-thumb.style-2{ height:180px; }
  }

  /* optional decorative dots (like your original design had) */
  .decor-dots{
    position:absolute;
    pointer-events:none;
    width:80px; height:80px;
    background:
      radial-gradient(circle at 10% 20%, rgba(0,150,120,.12) 6px, transparent 7px),
      radial-gradient(circle at 70% 60%, rgba(0,150,120,.12) 6px, transparent 7px);
    border-radius:10px;
    opacity:.9;
  }