<div class="is-section is-box">
    <div class="is-boxes">
        <div class="is-box-centered">
            <div class="is-container is-builder container">
                <div class="row clearfix headline-51" style="z-index:200;max-width:691px;">
                    <div class="col-12">
                        <h3>The Ultimate Web Maker</h3>
                        <h2>DOES THE <b>HARD WORK</b> FOR YOU.</h2>
                    </div>
                </div>
                <div class="row clearfix headline-D56">
                    <div class="col-12">
                        <div style="position: relative;" class="skrollable-wrap skrollable-wrap-xl">
                            <div
                                style="position: absolute;z-index: 100;width: 30%;left: 88%;top: 25%;transform: translate(-50%, -50%) skewX(50deg) skewY(-200deg) rotateX(59deg) rotateY(10deg);"
                            >
                                <img alt=""
                                     src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                                     style="box-shadow: rgba(22, 22, 22, 0.5) -3em 3em 5em; width: 100%; transform: translateX(0px);"
                                     data-100-bottom="transform:translateX(28%);"
                                     data-center="transform:translateX(0%);"
                                >
                            </div>
                            <div
                                style="position: absolute;z-index: 70;width: 30%;left: 55%;top: 30%;transform: translate(-50%, -50%) skewX(50deg) skewY(-200deg) rotateX(60deg) rotateY(10deg);"
                            >
                                <img alt=""
                                     src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                                     style="box-shadow: rgba(22, 22, 22, 0.4) -3em 3em 5em; width: 100%; transform: translateY(0px);"
                                     data-100-bottom="transform:translateY(-28%);"
                                     data-center="transform:translateY(0%);"
                                >
                            </div>
                            <div
                                style="position: absolute;z-index: 50;width: 30%;left: 45%;top: 65%;transform: translate(-50%, -50%) skewX(50deg) skewY(-200deg) rotateX(59deg) rotateY(10deg);"
                            >
                                <img alt=""
                                     src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                                     style="box-shadow: rgba(22, 22, 22, 0.5) -3em 3em 5em; width: 100%; transform: translateX(0px);"
                                     data-100-bottom="transform:translateX(28%);"
                                     data-center-top="transform:translateX(0%);"
                                >
                            </div>
                            <div
                                style="position: absolute;z-index: 0;width: 30%;left: 8%;top: 65%;transform: translate(-50%, -50%) skewX(50deg) skewY(-200deg) rotateX(59deg) rotateY(10deg);"
                            >
                                <img alt=""
                                     src="{{ config('builder.frontend_asset_path') }}/placeholders/square.jpg"
                                     style="box-shadow: rgba(22, 22, 22, 0.5) -3em 3em 5em; width: 100%; transform: translateX(0px);"
                                     data-100-bottom="transform:translateX(-28%);"
                                     data-center-top="transform:translateX(0%);"
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
