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

    <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 py-3 position-relative" style="z-index:5">
                    <h4 class="card-title text-white mb-0 px-4 py-3 position-relative d-inline-block"
                        style="max-width:70%"
                    >
                        Your Service Title Goes Here
                        <span
                            class="bg-primary position-absolute skew-x-n-lg opacity-80"
                            style="height:100%;top:0%;left:0;width:100%;z-index:-1;box-shadow:10px 10px;"
                        ></span>
                    </h4>
                    <span class="fade-in-left-md position-absolute"
                          style="padding-top:15%;top:0%;right:10%;width:25%;z-index:1;"
                    >
                        <span
                            class="bg-secondary skew-x-n-lg opacity-80 text-light d-block"
                            style="box-shadow:10px 10px; height:100%;position: absolute;top: 0;left: 0;width: 100%;"
                        ></span>
                    </span>
                    <span
                        class="fade-in-left-sm position-absolute"
                        style="padding-top:11%;top:-12%;right:50%;width:15%;z-index:1;transition-delay: 0.2s;"
                    >
                        <span
                            class="bg-secondary skew-x-n-lg opacity-80 text-light d-block"
                            style="height:100%;position: absolute;top: 0;left: 0;width: 100%;"
                        ></span>
                    </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 py-3 position-relative" style="z-index:5">
                    <h4 class="card-title text-white mb-0 px-4 py-3 position-relative d-inline-block"
                        style="max-width:70%"
                    >
                        Your Service
                        <span
                            class="bg-primary position-absolute skew-x-n-lg opacity-80"
                            style="height:100%;top:0%;left:0;width:100%;z-index:-1;box-shadow:10px 10px;"
                        ></span>
                    </h4>
                    <span class="fade-in-left-md position-absolute"
                          style="padding-top:15%;top:0%;right:10%;width:25%;z-index:1;"
                    >
                        <span
                            class="bg-secondary skew-x-n-lg opacity-80 text-light d-block"
                            style="box-shadow:10px 10px; height:100%;position: absolute;top: 0;left: 0;width: 100%;"
                        ></span>
                    </span>
                    <span
                        class="fade-in-left-sm position-absolute"
                        style="padding-top:11%;top:-12%;right:50%;width:15%;z-index:1;transition-delay: 0.2s;"
                    >
                        <span
                            class="bg-secondary skew-x-n-lg opacity-80 text-light d-block"
                            style="height:100%;position: absolute;top: 0;left: 0;width: 100%;"
                        ></span>
                    </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 py-3 position-relative" style="z-index:5">
                    <h4 class="card-title text-white mb-0 px-4 py-3 position-relative d-inline-block"
                        style="max-width:70%"
                    >
                        Your Service Title Goes Here
                        <span
                            class="bg-primary position-absolute skew-x-n-lg opacity-80"
                            style="height:100%;top:0%;left:0;width:100%;z-index:-1;box-shadow:10px 10px;"
                        ></span>
                    </h4>
                    <span class="fade-in-left-md position-absolute"
                          style="padding-top:15%;top:0%;right:10%;width:25%;z-index:1;"
                    >
                        <span
                            class="bg-secondary skew-x-n-lg opacity-80 text-light d-block"
                            style="box-shadow:10px 10px; height:100%;position: absolute;top: 0;left: 0;width: 100%;"
                        ></span>
                    </span>
                    <span
                        class="fade-in-left-sm position-absolute"
                        style="padding-top:11%;top:-12%;right:50%;width:15%;z-index:1;transition-delay: 0.2s;"
                    >
                        <span
                            class="bg-secondary skew-x-n-lg opacity-80 text-light d-block"
                            style="height:100%;position: absolute;top: 0;left: 0;width: 100%;"
                        ></span>
                    </span>
                </div>
            </div>
        </div>
    </div>

</div>
