<div class="row clearfix services-01">

    <div class="col-12 col-md-4">
        <div class="card overflow-hidden">
            <a href="#" class="stretched-link">
                <div class="card-img">
                    <img class="zoom-in-sm"
                         src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                         alt="" data-width="800" data-height="450" data-preset="custom" data-mode="resize"
                         data-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                         data-mfp-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                         loading="null"
                    >
                </div>
            </a>
            <div class="card-img-overlay d-flex align-items-end p-0 link-overlay">
                <div class="card-body p-3 position-relative" style="z-index:5">
                    <h4 class="card-title text-white mb-0">Your Service</h4>
                    <span
                        class="bg-primary position-absolute opacity-80 skew-y-md hover-t-md-light"
                        style="height:200%;top:-50%;left:-5px;right:-5px;z-index:-1;"
                    ></span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-4">
        <div class="card overflow-hidden">
            <a href="#" class="stretched-link">
                <div class="card-img">
                    <img class="zoom-in-sm"
                         src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                         alt="" data-width="800" data-height="450" data-preset="custom" data-mode="resize"
                         data-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                         data-mfp-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                         loading="null"
                    >
                </div>
            </a>
            <div class="card-img-overlay d-flex align-items-end p-0 link-overlay">
                <div class="card-body p-3 position-relative" style="z-index:5">
                    <h4 class="card-title text-white mb-0">Your Service</h4>
                    <span
                        class="position-absolute bg-secondary opacity-80 skew-y-md hover-t-md-light"
                        style="height:200%;top:-50%;left:-5px;right:-5px;z-index:-1;"
                    ></span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-4">
        <div class="card overflow-hidden">
            <a href="#" class="stretched-link">
                <div class="card-img">
                    <img class="zoom-in-sm"
                         src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                         alt="" data-width="800" data-height="450" data-preset="custom" data-mode="resize"
                         data-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                         data-mfp-src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                         loading="null"
                    >
                </div>
            </a>
            <div class="card-img-overlay d-flex align-items-end p-0 link-overlay">
                <div class="card-body p-3 position-relative" style="z-index:5">
                    <h4 class="card-title text-white mb-0">Your Service</h4>
                    <span
                        class="position-absolute bg-tertiary opacity-80 skew-y-md hover-t-md-light"
                        style="height:200%;top:-50%;left:-5px;right:-5px;z-index:-1;"
                    ></span>
                </div>
            </div>
        </div>
    </div>

</div>
