<div class="row services-11 gy-3">

    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card border-0 bg-secondary gradiented overflow-hidden">
            <a href="#" title="" class="stretched-link">
                <div class="card-img opacity-80 hover-opacity-30 image-wrapper">
                    <img src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg" alt="">
                </div>
            </a>
            <div class="card-img-overlay d-flex flex-column justify-content-between p-5 text-white slide-in-up-xs">
                <h3 class="text-uppercase font-weight-bold h4" style="text-shadow: 2px 2px 0px var(--secondary);">
                    Service Title
                </h3>
                <p class="mb-0 h5 fade-in-up-sm">Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card border-0 bg-secondary gradiented overflow-hidden">
            <a href="#" title="" class="stretched-link">
                <div class="card-img opacity-80 hover-opacity-30 image-wrapper">
                    <img src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg" alt="">
                </div>
            </a>
            <div class="card-img-overlay d-flex flex-column justify-content-between p-5 text-white slide-in-up-xs">
                <h3 class="text-uppercase font-weight-bold h4" style="text-shadow: 2px 2px 0px var(--secondary);">
                    Service Title
                </h3>
                <p class="mb-0 h5 fade-in-up-sm">Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card border-0 bg-secondary gradiented overflow-hidden">
            <a href="#" title="" class="stretched-link">
                <div class="card-img opacity-80 hover-opacity-30 image-wrapper">
                    <img src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg" alt="">
                </div>
            </a>
            <div class="card-img-overlay d-flex flex-column justify-content-between p-5 text-white slide-in-up-xs">
                <h3 class="text-uppercase font-weight-bold h4" style="text-shadow: 2px 2px 0px var(--secondary);">
                    Service Title
                </h3>
                <p class="mb-0 h5 fade-in-up-sm">Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card border-0 bg-secondary gradiented overflow-hidden">
            <a href="#" title="" class="stretched-link">
                <div class="card-img opacity-80 hover-opacity-30 image-wrapper">
                    <img
                        src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                    >
                </div>
            </a>
            <div class="card-img-overlay d-flex flex-column justify-content-between p-5 text-white slide-in-up-xs">
                <h3 class="text-uppercase font-weight-bold h4" style="text-shadow: 2px 2px 0px var(--secondary);">
                    Service Title
                </h3>
                <p class="mb-0 h5 fade-in-up-sm">Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>

</div>
