Masonry Grid Style 4

HTML

    <section class="mnsry-2-sec" id="mnsry-tmplt-prnt">
        <h3>
            Masonry Grid
        </h3>
        <div class="Mnsry-2-container">
            <figure>
                <a href="assets/images/image-1.png" data-lightbox="masonry-link" class="masonry-link">
                    <img src="https://nuitwebtek.com/wp-content/uploads/2023/12/mnsry4image-1.png" alt="Almonds" class="mnsry-imgs" />
                    <span class="cntnt-bar bg-drk-red">
                        <h5>Title</h5>
                        <p>text or coy text</p>
                    </span>
                </a>
            </figure>
            <figure>
                <a href="assets/images/image-2.png" data-lightbox="masonry-link" class="masonry-link">
                    <img src="https://nuitwebtek.com/wp-content/uploads/2023/12/mnsry4image-2.png" alt="girl" class="mnsry-imgs" />
                    <span class="cntnt-bar bg-drk-grn">
                        <h5>Title</h5>
                        <p>text or coy text</p>
                    </span>
                </a>
            </figure>
            <figure>
                <a href="assets/images/image-3.png" data-lightbox="masonry-link" class="masonry-link">
                    <img src="https://nuitwebtek.com/wp-content/uploads/2023/12/mnsry4image-3.png" alt="Shoes" class="mnsry-imgs" />
                    <span class="cntnt-bar bg-lght-red">
                        <h5>Title</h5>
                        <p>text or coy text</p>
                    </span>
                </a>
            </figure>
            <figure>
                <a href="assets/images/image-4.png" data-lightbox="masonry-link" class="masonry-link">
                    <img src="https://nuitwebtek.com/wp-content/uploads/2023/12/mnsry4image-4.png" alt="Fruits" class="mnsry-imgs" />
                    <span class="cntnt-bar bg-lght-grn">
                        <h5>Title</h5>
                        <p>text or coy text</p>
                    </span>
                </a>
            </figure>
            <figure>
                <a href="assets/images/image-5.png" data-lightbox="masonry-link" class="masonry-link">
                    <img src="https://nuitwebtek.com/wp-content/uploads/2023/12/mnsry4image-5.png" alt="lichi" class="mnsry-imgs" />
                    <span class="cntnt-bar bg-drk-red">
                        <h5>Title</h5>
                        <p>text or coy text</p>
                    </span>
                </a>
            </figure>
            <figure>
                <a href="assets/images/image-6.png" data-lightbox="masonry-link" class="masonry-link">
                    <img src="https://nuitwebtek.com/wp-content/uploads/2023/12/mnsry4image-6.png" alt="girl" class="mnsry-imgs">
                    <span class="cntnt-bar bg-drk-grn">
                        <h5>Title</h5>
                        <p>text or coy text</p>
                    </span>
                </a>
            </figure>
            <figure>
                <a href="assets/images/image-7.png" data-lightbox="masonry-link" class="masonry-link">
                    <img src="https://nuitwebtek.com/wp-content/uploads/2023/12/mnsry4image-7.png" alt="black berry" class="mnsry-imgs" />
                    <span class="cntnt-bar bg-red-var">
                        <h5>Title</h5>
                        <p>text or coy text</p>
                    </span>
                </a>
            </figure>
            <figure>
                <a href="assets/images/image-8.png" data-lightbox="masonry-link" class="masonry-link">
                    <img src="https://nuitwebtek.com/wp-content/uploads/2023/12/mnsry4image-8.png" alt="girl" class="mnsry-imgs" />
                    <span class="cntnt-bar bg-lght-grn">
                        <h5>Title</h5>
                        <p>text or coy text</p>
                    </span>
                </a>
            </figure>
        </div>
    </section>

CSS

* {
    margin: 0px;
    padding: 0px;
}

#mnsry-tmplt-prnt.mnsry-2-sec img {
    max-width: 100%;
    display: block;
}

#mnsry-tmplt-prnt.mnsry-2-sec .cntnt-bar {
    color: #fff;
    font-size: 16px;

    & h5 {
        color: #fff;
        font-size: 20px;
        line-height: 5px;
        font-weight: 600;
        letter-spacing: 0px;
    }

}

#mnsry-tmplt-prnt.mnsry-2-sec figure {
    margin-left: 10px;
    margin-right: 10px;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-bottom: 23px;
    break-inside: avoid;
    border-radius: 56px;
    border: 6px solid #FFF;
    background: url(<path-to-image>), lightgray 50% / cover no-repeat;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    transition: 0.4s;
}

#mnsry-tmplt-prnt.mnsry-2-sec figure>img {
    grid-row: 1 / -1;
    grid-column: 1;
    width: 100%;
}

#mnsry-tmplt-prnt.mnsry-2-sec figure a {
    color: black;
    text-decoration: none;
}

#mnsry-tmplt-prnt.mnsry-2-sec .mnsry-imgs {
    width: 100%;
}

#mnsry-tmplt-prnt.mnsry-2-sec .cntnt-bar {
    padding: 20px 20px 20px;
    width: 100%;
    display: block;
}

#mnsry-tmplt-prnt.mnsry-2-sec .bg-drk-red {
    background: #612209;
}

#mnsry-tmplt-prnt.mnsry-2-sec .bg-drk-blue {
    background: #203B4D;
}

#mnsry-tmplt-prnt.mnsry-2-sec .bg-lght-grn {
    background: #4E821E;
}

#mnsry-tmplt-prnt.mnsry-2-sec .bg-drk-grn {
    background: #365748;
}

#mnsry-tmplt-prnt.mnsry-2-sec .bg-lght-red {
    background: #FB0000;
}

#mnsry-tmplt-prnt.mnsry-2-sec .bg-red-var {
    background: #BD0101;
}

#mnsry-tmplt-prnt.mnsry-2-sec .Mnsry-2-container {
    column-count: 4;
    column-gap: 10px;
}

#mnsry-tmplt-prnt.mnsry-2-sec h3 {
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 46px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 0px 10px 40px;
}

#mnsry-tmplt-prnt.mnsry-2-sec {
    padding: 50px 30px 50px;
}


@media (max-width:991px) {
    #mnsry-tmplt-prnt.mnsry-2-sec .Mnsry-2-container {
        column-count: 3;
    }
}

@media (max-width:600px) {
    #mnsry-tmplt-prnt.mnsry-2-sec .Mnsry-2-container {
        column-count: 2;
    }

    #mnsry-tmplt-prnt.mnsry-2-sec {
        padding: 50px 0px 50px;
    }

    #mnsry-tmplt-prnt.mnsry-2-sec figure {
        margin-left: 6px;
        margin-right: 6px;
    }
    #mnsry-tmplt-prnt.mnsry-2-sec .cntnt-bar
    & h5 {
    font-size: 18px !important;
}
}

#mnsry-tmplt-prnt.mnsry-2-sec figure .cntnt-bar {
    height: 40px !important;
    transition: 0.5s;
}

#mnsry-tmplt-prnt.mnsry-2-sec figure:hover .cntnt-bar {
    height: 55px !important;
}

#mnsry-tmplt-prnt.mnsry-2-sec figure a img {
    transition: 0.6s;
}

#mnsry-tmplt-prnt.mnsry-2-sec figure:hover a img {
    filter: saturate(1.6);
}

Links

 <!-- font file -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.css"
        integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css"
        integrity="sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aDMOdAlcm7TUQY+35XYtrd3yh95QOOhsPDQY9QnKE0Wqag9y38OIgEvb88cA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

Scripts

 <!-- Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <!-- lightbox script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"
        integrity="sha512-Ixzuzfxv1EqafeQlTCufWfaC6ful6WFqIz4G+dWvK0beHw0NVJwvCKSgafpy5gwNqKmgUfIBraVwkKI+Cz0SEQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>