.masonry-gallery {
     box-sizing: border-box;
     width: 100%;
     padding: 90px 6%;
     background:
         linear-gradient(rgba(0, 0, 0, .88), rgba(0, 0, 0, .92));
 }

 .gallery-header {
     text-align: center;
     margin-bottom: 60px;
     box-sizing: border-box;
 }

 .gallery-header span {
     color: #9a6f3c;
     text-transform: uppercase;
     letter-spacing: 3px;
     font-size: 14px;
     font-weight: 600;
     display: block;
     margin-bottom: 10px;
 }

 .gallery-header h2 {
     color: #fff;
     font-size: clamp(38px, 5vw, 70px);
     margin: 0;
     font-weight: 600;
 }

 .gallery-grid {
     column-count: 4;
     column-gap: 22px;
     box-sizing: border-box;
 }

 .gallery-item {
     position: relative;
     margin-bottom: 22px;
     overflow: hidden;
     border-radius: 26px;
     break-inside: avoid;
     cursor: pointer;
     background: #1a1a1a;
     box-shadow:
         0 10px 30px rgba(0, 0, 0, .35),
         0 0 0 1px rgba(255, 255, 255, .03);
     box-sizing: border-box;
 }

 .gallery-item img {
     width: 100%;
     display: block;
     border-radius: 26px;
     transition:
         transform .6s ease,
         filter .6s ease;
 }

 .gallery-item:hover img {
     transform: scale(1.03);
     filter: brightness(.88);
 }

 .image-modal {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .94);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     padding: 30px;
 }

 .image-modal.active {
     display: flex;
 }

 .image-modal img {
     max-width: 92%;
     max-height: 90vh;
     border-radius: 24px;
     animation: zoom .3s ease;
 }

 .close-modal {
     position: absolute;
     top: 30px;
     right: 40px;
     color: #fff;
     font-size: 42px;
     cursor: pointer;
     transition: .3s;
     line-height: 1;
 }

 .close-modal:hover {
     color: #9a6f3c;
 }

 @keyframes zoom {
     from {
         transform: scale(.92);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }

 @media(max-width:1200px) {

     .gallery-grid {
         column-count: 3;
     }

 }

 @media(max-width:768px) {

     .gallery-grid {
         column-count: 2;
     }

     .masonry-gallery {
         padding: 70px 20px;
     }

 }

 @media(max-width:540px) {

     .gallery-grid {
         column-count: 1;
     }

     .gallery-header h2 {
         font-size: 42px;
     }

 }