<div class="row services-18">
    <div class="col-12">

        <div class="grid-wrap g-4">
            <div class="card border-0 overflow-hidden featured-card">
                <a href="#" title="" class="stretched-link">
                    <div class="card-img card-img-stretch">
                        <img
                            src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                            alt=""
                            data-width="800"
                            data-height="800"
                            data-preset="medium"
                            data-mode="resize"
                            data-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                            data-mfp-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                            data-path="/photos/"
                            data-name="julie-kwak-fry-tptmjrk-unsplash-3Rlxu2"
                            data-group="1"
                        >
                    </div>
                </a>
                <div class="card-img-overlay d-flex flex-column justify-content-end p-3 text-white bg-gradient-top gradient-start-primary-75 gradient-end-transparent">
                    <h3 class="text-uppercase fw-semibold h1">Service Heading</h3>
                </div>
            </div>

            <div class="card border-0 overflow-hidden">
                <a href="#" title="" class="stretched-link">
                    <div class="card-img card-img-stretch">
                        <img
                            src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                            alt=""
                            data-width="800"
                            data-height="800"
                            data-preset="medium"
                            data-mode="resize"
                            data-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                            data-mfp-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                            data-path="/photos/"
                            data-name="ruben-bagues-vpqfc4nidh0-unsplash-9uqtu2.jpg"
                            data-group="1"
                        >
                    </div>
                </a>
                <div class="card-img-overlay d-flex flex-column justify-content-end p-3 text-white bg-gradient-top gradient-start-primary-75 gradient-end-transparent">
                    <h3 class="text-uppercase fw-semibold h1">Service Heading</h3>
                </div>
            </div>

            <div class="card border-0 overflow-hidden">
                <a href="#" title="" class="stretched-link">
                    <div class="card-img card-img-stretch">
                        <img src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg" alt="" data-width="800"
                             data-height="800"
                             data-preset="medium"
                             data-mode="resize"
                             data-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                             data-mfp-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                             data-path="/photos/"
                             data-name="-IlCYO1.jpg"
                             data-group="1"
                        >
                    </div>
                </a>
                <div class="card-img-overlay d-flex flex-column justify-content-end p-3 text-white bg-gradient-top gradient-start-primary-75 gradient-end-transparent">
                    <h3 class="text-uppercase fw-semibold h1">Service Heading</h3>
                </div>
            </div>

            <div class="card border-0 overflow-hidden sub-featured-card">
                <div class="card-img card-img-stretch">
                    <img
                        src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                        alt=""
                        data-width="800"
                        data-height="800"
                        data-preset="medium"
                        data-mode="resize"
                        data-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                        data-mfp-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                        data-path="/photos/"
                        data-name="mitch-lensink-hx_dy7xeszo-unsplash-xpg6d1.jpg"
                        data-group="1"
                    >
                </div>
                <div class="card-img-overlay lead fw-semibold d-flex flex-column justify-content-end p-3 text-white bg-gradient-top gradient-start-primary-75 gradient-end-transparent"
                >
                    <h3 class="text-uppercase fw-semibold h1">Box Heading</h3>
                    <p>Box brief description, i.e special offer text</p>
                    <span>
                        <a class="btn btn-secondary">Read More</a>
                    </span>
                </div>
            </div>
        </div>

    </div>
</div>
