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

    <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-lg" style="transition-duration:2.5s;"
                         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-stretch p-0 link-overlay">
                <div style="z-index:5"
                     class="card-body p-0 position-relative d-flex flex-column justify-content-between"
                >
                    <h4 class="card-title text-white mb-0 px-4 py-3 bg-dark-30 hover-bg-dark-60 text-center"
                        style="transition-duration: 0.8s;"
                    >
                        Your Service Title Goes Here
                    </h4>
                    <div class="card-btn slide-in-up-100 p-3 text-right">
                        <span class="btn btn-light">Read More</span>
                    </div>
                </div>
                <span style="padding-top:90%;top:100%;right:0%;width:100%;z-index:1;transform-origin:bottom left;"
                      class="hover-skew-y-n-lg position-absolute"
                >
                    <span class="bg-primary opacity-70 gradiented"
                          style="height:100%;position: absolute;top: 0;left: 0;width: 100%;"
                    ></span>
                </span>
            </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-lg" style="transition-duration:2.5s;"
                         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-stretch p-0 link-overlay">
                <div style="z-index:5"
                     class="card-body p-0 position-relative d-flex flex-column justify-content-between"
                >
                    <h4 class="card-title text-white mb-0 px-4 py-3 bg-dark-30 hover-bg-dark-60 text-center"
                        style="transition-duration: 0.8s;"
                    >
                        Your Service Title Goes Here
                    </h4>
                    <div class="card-btn slide-in-up-100 p-3 text-right">
                        <span class="btn btn-light">Read More</span>
                    </div>
                </div>
                <span style="padding-top:90%;top:100%;right:0%;width:100%;z-index:1;transform-origin:bottom left;"
                      class="hover-skew-y-n-lg position-absolute"
                >
                    <span class="bg-primary opacity-70 gradiented"
                          style="height:100%;position: absolute;top: 0;left: 0;width: 100%;"
                    ></span>
                </span>
            </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-lg" style="transition-duration:2.5s;"
                         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-stretch p-0 link-overlay">
                <div style="z-index:5"
                     class="card-body p-0 position-relative d-flex flex-column justify-content-between"
                >
                    <h4 class="card-title text-white mb-0 px-4 py-3 bg-dark-30 hover-bg-dark-60 text-center"
                        style="transition-duration: 0.8s;"
                    >
                        Your Service Title Goes Here
                    </h4>
                    <div class="card-btn slide-in-up-100 p-3 text-right">
                        <span class="btn btn-light">Read More</span>
                    </div>
                </div>
                <span style="padding-top:90%;top:100%;right:0%;width:100%;z-index:1;transform-origin:bottom left;"
                      class="hover-skew-y-n-lg position-absolute"
                >
                    <span class="bg-primary opacity-70 gradiented"
                          style="height:100%;position: absolute;top: 0;left: 0;width: 100%;"
                    ></span>
                </span>
            </div>
        </div>
    </div>

</div>
