const GalleryMasonryLayer = () => {
  return (
    <div className='card h-100 p-0 radius-12 overflow-hidden gallery-scale'>
      <div className='card-body p-24'>
        <div className='masonry-wrapper'>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img1.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img1.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img2.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img2.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img3.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img3.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img4.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img4.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img5.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img5.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img6.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img6.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img7.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img7.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img8.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img8.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img9.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img9.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img10.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img10.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img11.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img11.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img12.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img12.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img1.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img1.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img2.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img2.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img3.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img3.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img4.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img4.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img5.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img5.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img6.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img6.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img7.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img7.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img8.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img8.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img9.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img9.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img10.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img10.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img11.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img11.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
          <div className='hover-scale-img border radius-16 overflow-hidden p-8'>
            <a
              href='/assets/images/gallery/gallery-img12.png'
              className='popup-img w-100 h-100 d-flex radius-12 overflow-hidden'
            >
              <img
                src='/assets/images/gallery/gallery-img12.png'
                alt=''
                className='hover-scale-img__img w-100 h-100 object-fit-cover'
              />
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default GalleryMasonryLayer;
