<div class="row row-cols-sm-2 row-cols-md-3 services-16 g-5">

    <div class="col-12">
        <div class="bg-transparent border-0 card p-0 position-relative shadow-none">
            <a href="#" title="" class="stretched-link">
                <div class="card-img image-wrapper">
                    <img
                        src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                        alt=""
                        class="border border-4 border-primary rounded-circle"
                        data-preset="medium"
                        data-width="800"
                        data-height="450"
                        data-mode="resize"
                        data-group="1"
                    >
                </div>
            </a>
            <div class="card-img-overlay d-flex flex-column slide-right-sm justify-content-end p-0 align-items-start">
                <h3 class="bg-white-90 h5 mb-4 p-3 rounded rounded-4 fw-bold" style="max-width:75%">
                    Service Heading
                </h3>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="bg-transparent border-0 card p-0 position-relative shadow-none">
            <a href="#" title="" class="stretched-link">
                <div class="card-img image-wrapper">
                    <img
                        src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                        alt=""
                        data-preset="medium"
                        data-width="800"
                        data-height="450"
                        data-mode="resize"
                        data-group="1"
                        class="border border-4 border-secondary rounded-circle"
                    >
                </div>
            </a>
            <div class="card-img-overlay d-flex flex-column slide-right-sm justify-content-end p-0 align-items-start">
                <h3 class="bg-white-90 h5 mb-4 p-3 rounded rounded-4 fw-bold" style="max-width:75%">
                    Service Heading
                </h3>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="bg-transparent border-0 card p-0 position-relative shadow-none">
            <a href="#" title="" class="stretched-link">
                <div class="card-img image-wrapper">
                    <img src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                         alt=""
                         class="border border-4 border-tertiary rounded-circle"
                         data-preset="medium"
                         data-width="800"
                         data-height="450"
                         data-mode="resize"
                         data-group="1"
                    >
                </div>
            </a>
            <div class="card-img-overlay d-flex flex-column slide-right-sm justify-content-end p-0 align-items-start">
                <h3 class="bg-white-90 h5 mb-4 p-3 rounded rounded-4 fw-bold" style="max-width:75%">
                    Service Heading
                </h3>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="bg-transparent border-0 card p-0 position-relative shadow-none">
            <a href="#" title="" class="stretched-link">
                <div class="card-img image-wrapper">
                    <img
                        src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                        alt=""
                        data-preset="medium"
                        data-width="800"
                        data-height="450"
                        data-mode="resize"
                        data-group="1"
                        class="border border-4 border-color-5 rounded-circle"
                    >
                </div>
            </a>
            <div class="card-img-overlay d-flex flex-column slide-right-sm justify-content-end p-0 align-items-start">
                <h3 class="bg-white-90 h5 mb-4 p-3 rounded rounded-4 fw-bold" style="max-width:75%">
                    Service Heading
                </h3>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="bg-transparent border-0 card p-0 position-relative shadow-none">
            <a href="#" title="" class="stretched-link">
                <div class="card-img image-wrapper">
                    <img
                        src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                        alt=""
                        class="border border-4 border-tertiary rounded-circle"
                        data-preset="medium"
                        data-width="800"
                        data-height="450"
                        data-mode="resize"
                        data-group="1"
                    >
                </div>
            </a>
            <div class="card-img-overlay d-flex flex-column slide-right-sm justify-content-end p-0 align-items-start">
                <h3 class="bg-white-90 h5 mb-4 p-3 rounded rounded-4 fw-bold" style="max-width:75%">
                    Service Heading
                </h3>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="bg-transparent border-0 card p-0 position-relative shadow-none">
            <a href="#" title="" class="stretched-link">
                <div class="card-img image-wrapper">
                    <img
                        src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                        alt=""
                        class="border border-4 border-primary rounded-circle"
                        data-preset="medium"
                        data-width="800"
                        data-height="450"
                        data-mode="resize"
                        data-group="1"
                    >
                </div>
            </a>
            <div class="card-img-overlay d-flex flex-column slide-right-sm justify-content-end p-0 align-items-start">
                <h3 class="bg-white-90 h5 mb-4 p-3 rounded rounded-4 fw-bold" style="max-width:75%">
                    Service Heading
                </h3>
            </div>
        </div>
    </div>

</div>
