<div class="row row-cols-sm-2 row-cols-md-4 services-17 g-5">

    <div class="col-12 col-md-6 col-lg-4">
        <div
            class="bg-transparent border border-4 border-primary rounded-circle card p-0 position-relative shadow-none overflow-hidden"
        >
            <a href="/solar-pv" 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"
                    >
                </div>
            </a>
            <div
                class="card-img-overlay d-flex flex-column justify-content-center text-center text-white p-4 bg-dark-25 hover-bg-dark-0"
                style="text-shadow: 0 1px 5px rgba(0,0,0,0.6);"
            >
                <h3 class="fw-bold mb-0">Service Heading</h3>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
        <div
            class="bg-transparent border border-4 border-secondary rounded-circle card p-0 position-relative shadow-none overflow-hidden"
        >
            <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"
                    >
                </div>
            </a>
            <div
                class="card-img-overlay d-flex flex-column justify-content-center text-center text-white p-4 bg-dark-25 hover-bg-dark-0"
                style="text-shadow: 0 1px 5px rgba(0,0,0,0.6);"
            >
                <h3 class="fw-bold mb-0">Service Heading</h3>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
        <div
            class="bg-transparent border border-4 border-tertiary rounded-circle card p-0 position-relative shadow-none overflow-hidden"
        >
            <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"
                    >
                </div>
            </a>
            <div
                class="card-img-overlay d-flex flex-column justify-content-center text-center text-white p-4 bg-dark-25 hover-bg-dark-0"
                style="text-shadow: 0 1px 5px rgba(0,0,0,0.6);"
            >
                <h3 class="fw-bold mb-0">Service Heading</h3>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
        <div
            class="bg-transparent border border-4 border-tertiary rounded-circle card p-0 position-relative shadow-none overflow-hidden"
        >
            <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"
                    >
                </div>
            </a>
            <div
                class="card-img-overlay d-flex flex-column justify-content-center text-center text-white p-4 bg-dark-25 hover-bg-dark-0"
                style="text-shadow: 0 1px 5px rgba(0,0,0,0.6);"
            >
                <h3 class="fw-bold mb-0">Service Heading</h3>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
        <div
            class="bg-transparent border border-4 border-color-5 rounded-circle card p-0 position-relative shadow-none overflow-hidden"
        >
            <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"
                    >
                </div>
            </a>
            <div
                class="card-img-overlay d-flex flex-column justify-content-center text-center text-white p-4 bg-dark-25 hover-bg-dark-0"
                style="text-shadow: 0 1px 5px rgba(0,0,0,0.6);"
            >
                <h3 class="fw-bold mb-0">Service Heading</h3>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
        <div
            class="bg-transparent border border-4 border-secondary rounded-circle card p-0 position-relative shadow-none overflow-hidden"
        >
            <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"
                    >
                </div>
            </a>
            <div
                class="card-img-overlay d-flex flex-column justify-content-center text-center text-white p-4 bg-dark-25 hover-bg-dark-0"
                style="text-shadow: 0 1px 5px rgba(0,0,0,0.6);"
            >
                <h3 class="fw-bold mb-0">Service Heading</h3>
            </div>
        </div>
    </div>

</div>
