Slider Block: Met een achterground

<section class="org-slider-block has-bg">
    <svg class="absolute top-0 left-0 w-full h-1/2 -z-10" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1400 330" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <rect id="path-1" x="0" y="0" width="1400" height="330"></rect>
            <linearGradient x1="1.4844191%" y1="0.289898871%" x2="99.0290687%" y2="100.236218%" id="linearGradient-3">
                <stop stop-color="#501D79" offset="0%"></stop>
                <stop stop-color="#562081" offset="10.01%"></stop>
                <stop stop-color="#980D7F" offset="40.29%"></stop>
                <stop stop-color="#871280" offset="55.87%"></stop>
                <stop stop-color="#5C1E81" offset="86.53%"></stop>
                <stop stop-color="#562081" offset="90.28%"></stop>
                <stop stop-color="#501D79" offset="100%"></stop>
            </linearGradient>
            <linearGradient x1="106.58681%" y1="22.6168912%" x2="-12.3442362%" y2="103.145895%" id="linearGradient-4">
                <stop stop-color="#B92D85" stop-opacity="0.7" offset="0%"></stop>
                <stop stop-color="#C44072" stop-opacity="0.7655" offset="21.85%"></stop>
                <stop stop-color="#DF703F" stop-opacity="0.8983" offset="66.11%"></stop>
                <stop stop-color="#F69915" offset="100%"></stop>
            </linearGradient>
            <linearGradient x1="37.8903108%" y1="8.71877771%" x2="80.6674569%" y2="78.1936463%" id="linearGradient-5">
                <stop stop-color="#D62B87" stop-opacity="0.7" offset="0%"></stop>
                <stop stop-color="#C02084" stop-opacity="0.7" offset="20.13%"></stop>
                <stop stop-color="#980D7F" stop-opacity="0.7" offset="50.5%"></stop>
                <stop stop-color="#3F2584" stop-opacity="0.7" offset="90.13%"></stop>
                <stop stop-color="#282B85" stop-opacity="0.7" offset="100%"></stop>
            </linearGradient>
            <linearGradient x1="45.8647309%" y1="82.7622496%" x2="54.8047413%" y2="-3.78025781%" id="linearGradient-6">
                <stop stop-color="#282A86" stop-opacity="0.7" offset="0%"></stop>
                <stop stop-color="#00ABB5" stop-opacity="0.7" offset="99.74%"></stop>
            </linearGradient>
            <linearGradient x1="1.48350188%" y1="0.289898871%" x2="99.0281515%" y2="100.236218%" id="linearGradient-7">
                <stop stop-color="#501D79" offset="0%"></stop>
                <stop stop-color="#562081" offset="10.01%"></stop>
                <stop stop-color="#980D7F" offset="40.29%"></stop>
                <stop stop-color="#871280" offset="55.87%"></stop>
                <stop stop-color="#5C1E81" offset="86.53%"></stop>
                <stop stop-color="#562081" offset="90.28%"></stop>
                <stop stop-color="#501D79" offset="100%"></stop>
            </linearGradient>
            <linearGradient x1="37.8506195%" y1="8.71873045%" x2="80.7633002%" y2="78.1932224%" id="linearGradient-8">
                <stop stop-color="#D62B87" stop-opacity="0.7" offset="0%"></stop>
                <stop stop-color="#C02084" stop-opacity="0.7" offset="20.13%"></stop>
                <stop stop-color="#980D7F" stop-opacity="0.7" offset="50.5%"></stop>
                <stop stop-color="#3F2584" stop-opacity="0.7" offset="90.13%"></stop>
                <stop stop-color="#282B85" stop-opacity="0.7" offset="100%"></stop>
            </linearGradient>
            <linearGradient x1="44.8101129%" y1="92.378046%" x2="54.0787198%" y2="3.69614112%" id="linearGradient-9">
                <stop stop-color="#B92D85" stop-opacity="0.7" offset="0%"></stop>
                <stop stop-color="#990D7F" stop-opacity="0.7" offset="48.93%"></stop>
                <stop stop-color="#741781" stop-opacity="0.7" offset="65.22%"></stop>
                <stop stop-color="#282A86" stop-opacity="0.7" offset="100%"></stop>
            </linearGradient>
        </defs>
        <g id="button-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="facility-detail" transform="translate(1.000000, -1049.000000)">
                <g id="bg" transform="translate(-1.000000, 1049.000000)">
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <use id="Mask" fill="#D8D8D8" xlink:href="#path-1"></use>
                    <g id="Patroon_RGB_new[62]-Copy" mask="url(#mask-2)">
                        <g transform="translate(781.791996, -54.500000) rotate(-270.000000) translate(-781.791996, 54.500000) translate(-641.208004, -1477.500000)">
                            <polygon id="Path" fill="url(#linearGradient-3)" fill-rule="nonzero" points="2846 2846 2846 -4.54747351e-13 0 -4.54747351e-13 0 2846"></polygon>
                            <g id="Group" opacity="0.35" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(370.500000, 204.500000)">
                                <g fill="#562081" fill-rule="nonzero" id="Shape">
                                    <path d="M2338.13909,1281.8796 C2088.91893,1092.8635 1692.50833,1059.74387 1459.34531,1206.6077 C1194.73705,1373.2095 1116.79303,1749.90352 1183.69777,1965.01387 C1250.60251,2180.12422 1558.0298,2234.98907 1530.26433,1932.89786 C1502.49886,1630.80665 1452.65483,1514.05158 1546.65599,1311.98836 C1660.72858,1280.20689 1917.64279,1375.55129 2200.64985,1557.87655 C2435.82001,1709.08943 2577.65807,1463.53577 2338.13909,1281.8796 Z M1634.63573,911.541871 C1802.56663,967.075803 2117.68797,833.59364 2201.65342,649.261131 C2266.55102,506.746341 2073.53084,394.005768 1995.58681,496.375546 C1838.69519,702.118729 1703.21309,781.739668 1646.00954,795.121338 C1485.10363,696.431519 1469.38102,355.198923 1456.00007,293.64324 C1423.21674,143.768531 1234.54537,100.278102 1237.22156,315.388454 C1241.90489,682.380765 1469.04649,856.677022 1634.63573,911.541871 Z M794.31217,49.7622965 C613.334843,-82.7162405 357.089681,63.4785086 556.800336,321.075664 C749.820517,569.974733 1033.49662,884.443988 1058.5859,1155.42281 C956.556169,1276.52693 662.509828,1349.79158 211.571867,1352.13337 C-120.9447,1353.80608 -24.6018717,1758.60161 246.02781,1791.72124 C595.93961,1834.54259 1042.19424,1679.31521 1213.13585,1236.04738 C1303.79178,1001.86815 1285.39298,409.72923 794.31217,49.7622965 Z"></path>
                                </g>
                            </g>
                            <path d="M1481.60299,196.723212 C1439.05945,54.7610928 1674.89137,-49.0319664 1763.66333,108.331704 C1878.5644,311.56521 1789.45745,695.599529 1623.63813,814.459323 C1460.8337,930.975402 1144.26955,1024.38916 799.231362,780.308058 C596.898291,637.006673 765.39752,490.691941 927.196979,561.673001 C993.524708,590.802021 1321.81347,807.42818 1523.14157,724.393733 C1549.27068,662.117897 1567.02507,481.986717 1481.60299,196.723212 Z" id="Path" fill="url(#linearGradient-4)" fill-rule="nonzero"></path>
                            <path d="M1639.00774,1425.21662 C1481.98724,1182.64656 918.521353,798.884003 250.598331,1012.34565 C4.52142783,1090.97181 -32.976005,1428.56241 342.333122,1416.85213 C704.919905,1405.81101 1189.70814,1354.62037 1459.22094,1514.54931 C1503.07955,1691.54181 1371.83853,2014.7455 1068.51108,2435.64637 C844.865681,2746.47062 1286.79971,2930.82387 1501.40555,2701.30241 C1778.28392,2404.86507 1935.97402,1884.25954 1639.00774,1425.21662 Z" id="Path" fill="url(#linearGradient-5)" fill-rule="nonzero"></path>
                            <path d="M1779.37196,1176.74891 C1755.29173,1535.73547 2052.95013,1863.5786 2298.4347,1947.29748 C2543.91927,2031.01636 2802.78174,1781.86897 2503.11666,1603.04545 C2203.45157,1424.22192 2060.97687,1391.40412 1936.56235,1166.70265 C1984.05392,1038.7802 2246.59532,864.310053 2607.79877,723.997211 C2907.46385,607.46053 2774.68814,309.086443 2443.91942,409.214223 C2099.43835,513.360509 1800.77661,860.291547 1779.37196,1176.74891 Z" id="Path" fill="url(#linearGradient-6)" fill-rule="nonzero"></path>
                        </g>
                    </g>
                    <g id="Pattern_Pattern_Purple_RGB[54]" mask="url(#mask-2)">
                        <g transform="translate(-2037.000000, -2487.000000)">
                            <polygon id="Path" fill="url(#linearGradient-7)" fill-rule="nonzero" points="4564 4564 4564 0 0 0 0 4564"></polygon>
                            <g id="Group" opacity="0.4" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(592.000000, 325.000000)">
                                <g fill="#562081" fill-rule="nonzero" id="Shape">
                                    <path d="M2623.7352,1463.99791 C2893.33435,1553.18917 3399.23555,1338.80778 3534.03513,1042.7573 C3638.22285,813.868908 3328.34494,632.79992 3203.21226,797.21271 C2951.33576,1127.65018 2733.83047,1255.5268 2641.9949,1277.01866 C2383.6738,1118.51614 2358.43245,570.473502 2336.95045,471.610909 C2284.31954,230.901988 1981.42328,161.053417 1985.71968,506.535195 C1993.23838,1095.94968 2357.8954,1375.88126 2623.7352,1463.99791 Z M1274.66534,79.9216149 C984.121232,-132.847878 572.740852,101.95078 893.359764,515.669239 C1203.23767,915.417984 1658.65616,1420.47688 1698.93492,1855.68721 C1535.13464,2050.18862 1063.0676,2167.85659 339.661107,2171.61767 C-194.166697,2174.30415 -39.496267,2824.43316 394.977267,2877.62553 C956.731677,2946.39951 1673.15652,2697.09384 1947.58912,1985.17571 C2092.59265,1609.06802 2063.05489,658.052864 1274.66534,79.9216149 Z M3753.15157,2058.78536 C3353.04924,1755.21273 2716.64487,1702.02035 2342.32095,1937.8936 C1917.51431,2205.46736 1792.38164,2810.46345 1899.79166,3155.94522 C2007.20168,3501.9643 2500.75073,3589.54366 2456.17557,3104.36474 C2411.60041,2619.18582 2331.57994,2431.66927 2482.49102,2107.14207 C2665.62511,2056.09888 3078.07959,2209.22844 3532.42398,2502.05514 C3909.9702,2744.91325 4137.67945,2350.53747 3753.15157,2058.78536 Z"></path>
                                </g>
                            </g>
                            <path d="M2636.77742,2290.80312 C2384.3326,1901.43712 1478.43784,1285.43324 404.605381,1628.07533 C8.98289463,1754.28362 -51.3024366,2296.17369 552.089138,2277.37671 C1135.02676,2259.65384 1914.42997,2177.48419 2347.73079,2434.19722 C2417.70483,2718.30014 2207.24444,3237.09678 1719.57917,3913.25099 C1360.02023,4411.63948 2070.52592,4707.55764 2415.55179,4339.13684 C2860.69437,3863.30473 3114.21572,3027.64472 2636.77742,2290.80312 Z" id="Path" fill="url(#linearGradient-8)" fill-rule="nonzero"></path>
                            <path d="M2854.21413,1895.89936 C2815.35245,2471.87335 3295.72594,2997.87944 3691.89913,3132.20173 C4088.07232,3266.52402 4505.83533,2866.78089 4022.22337,2579.86847 C3538.61141,2292.95606 3308.67983,2240.30172 3107.89451,1879.78069 C3184.53837,1674.53623 3608.23858,1394.60857 4191.16371,1169.48441 C4674.77567,982.507784 4460.49671,503.783138 3926.68842,664.432598 C3370.75056,831.529528 2888.75784,1388.1611 2854.21413,1895.89936 Z" id="Path" fill="url(#linearGradient-9)" fill-rule="nonzero"></path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </svg>
    <div class="mol-slider">
        <div class="swiper-top">
            <div class="slider-heading">
                <h1 class="atm-heading ">Onze diensten</h1>

            </div>
            <div class="pagination">
                <div class="swiper-prev"> <i class="atm-icon  fa-solid fa-long-arrow-left   "></i>
                </div>
                <div class="swiper-next"> <i class="atm-icon  fa-solid fa-long-arrow-right  fa-md "></i>
                </div>
            </div>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="atm-slide js--clickable">
                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/200/263/360" alt="">
                        </picture>
                        <div class="atm-slide__content">
                            <div>
                                <div class="subtitle"><span class="atm-heading ">De beste service</span>
                                </div>
                                <div class="title"><span class="atm-heading h6">Een oplossing voor een facilitair of technisch vraagstuk</span>
                                </div>
                            </div>
                            <i class="atm-icon  far fa-external-link   "></i>

                        </div>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-slide js--clickable">
                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/232/263/360" alt="">
                        </picture>
                        <div class="atm-slide__content">
                            <div>
                                <div class="subtitle"><span class="atm-heading ">Keuzes</span>
                                </div>
                                <div class="title"><span class="atm-heading h6">Aan de slag met een specifiek thema</span>
                                </div>
                            </div>
                            <i class="atm-icon  far fa-external-link   "></i>

                        </div>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-slide js--clickable">
                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/234/263/360" alt="">
                        </picture>
                        <div class="atm-slide__content">
                            <div>
                                <div class="subtitle"><span class="atm-heading ">Uitbesteding</span>
                                </div>
                                <div class="title"><span class="atm-heading h6">Meer weten over Vebego Facility Solutions</span>
                                </div>
                            </div>
                            <i class="atm-icon  far fa-external-link   "></i>

                        </div>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-slide js--clickable">
                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/235/263/360" alt="">
                        </picture>
                        <div class="atm-slide__content">
                            <div>
                                <div class="subtitle"><span class="atm-heading ">Uitdaging</span>
                                </div>
                                <div class="title"><span class="atm-heading h6">Project management</span>
                                </div>
                            </div>
                            <i class="atm-icon  far fa-external-link   "></i>

                        </div>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-slide js--clickable">
                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/236/263/360" alt="">
                        </picture>
                        <div class="atm-slide__content">
                            <div>
                                <div class="subtitle"><span class="atm-heading ">De beste service</span>
                                </div>
                                <div class="title"><span class="atm-heading h6">Werken bij Vebego Facility Solutions</span>
                                </div>
                            </div>
                            <i class="atm-icon  far fa-external-link   "></i>

                        </div>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-slide js--clickable">
                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/237/263/360" alt="">
                        </picture>
                        <div class="atm-slide__content">
                            <div>
                                <div class="subtitle"><span class="atm-heading ">Keuzes</span>
                                </div>
                                <div class="title"><span class="atm-heading h6">Uitbesteding</span>
                                </div>
                            </div>
                            <i class="atm-icon  far fa-external-link   "></i>

                        </div>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-slide js--clickable">
                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/238/263/360" alt="">
                        </picture>
                        <div class="atm-slide__content">
                            <div>
                                <div class="subtitle"><span class="atm-heading ">Uitbesteding</span>
                                </div>
                                <div class="title"><span class="atm-heading h6">Interim</span>
                                </div>
                            </div>
                            <i class="atm-icon  far fa-external-link   "></i>

                        </div>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-slide js--clickable">
                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/239/263/360" alt="">
                        </picture>
                        <div class="atm-slide__content">
                            <div>
                                <div class="subtitle"><span class="atm-heading ">Uitdaging</span>
                                </div>
                                <div class="title"><span class="atm-heading h6">Project management</span>
                                </div>
                            </div>
                            <i class="atm-icon  far fa-external-link   "></i>

                        </div>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-slide js--clickable">
                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/240/263/360" alt="">
                        </picture>
                        <div class="atm-slide__content">
                            <div>
                                <div class="subtitle"><span class="atm-heading ">Keuzes</span>
                                </div>
                                <div class="title"><span class="atm-heading h6">Uitbesteding</span>
                                </div>
                            </div>
                            <i class="atm-icon  far fa-external-link   "></i>

                        </div>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="vebego-container">
        <a class="atm-button atm-button-primary  button-md icon-right   ">
            <div class="button-content-wrapper">
                <span class="button-content">
                    <span>Meer weten</span>
                    <i class="atm-icon  fal fa-chevron-right   "></i>

                </span>
            </div>
            <span class="button-triangle"></span>
        </a>

    </div>
</section>