<section class="o-methodsRow o-block">
    @include('svg.mask', ['color' =>  '#FAFCFF' ,'vb_w' => 1920, 'vb_h' => 345, 'pathId' => 8])
    <div class="l-grid">
        <div class="l-grid--content">
            <h2>{{$component->getValueFromAttribute('Title')}}</h2>
            <div class="c-methodsRow__blocks">
                @for($i = 1; $i < 4; $i++)
                    <a href="{{$links->method->route}}#step{{$i}}" class="c-methodsRow__block">

                            @if($component->getValueFromAttribute('Image_'.$i,'getValueAsCollection')->count() > 0)
                                @include('svg.mask', ['img' => $component->getValueFromAttribute('Image_'.$i,'getValueAsCollection')->count() <= 0 ?: $component->getValueFromAttribute('Image_'.$i,'getValueAsCollection')[0]->medium_image_url, 'color'=> '#7AD3FF', 'vb_w' => 720, 'vb_h' => 682 , 'pathId' => (8+$i)])
                            @endif
                            {!! $component->getValueFromAttribute('text_'.$i) !!}
                    </a>
                @endfor

                <a href="{{$links->method->route}}" class="c-methodsRow__block">
                    <div class="c-methodsRow__svgGradient">
                        <svg width="229px" height="232px" viewBox="0 0 229 232" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <defs>
                                <linearGradient x1="11.1875975%" y1="33.9589962%" x2="76.1642054%" y2="47.3571828%"
                                                id="c-methodsRow__linearGradient">
                                    <stop stop-color="#699BFF" offset="0%"></stop>
                                    <stop stop-color="#2F6CE6" offset="100%"></stop>
                                </linearGradient>
                            </defs>
                            <g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <g id="Diensten---overzicht" transform="translate(-1407.000000, -1891.000000)"
                                   fill="url(#c-methodsRow__linearGradient)">
                                    <path d="M1635.99998,2012.90202 C1635.96047,2031.7505 1623.35036,2047.73551 1602.6869,2065.19689 C1582.03624,2082.18103 1553.33224,2100.64261 1521.44555,2113.40171 C1489.5578,2125.71438 1460.89757,2127.71583 1440.27575,2110.27571 C1419.64111,2093.66252 1407.04274,2057.61095 1407.00003,2012.90308 C1406.97654,1968.31639 1419.76496,1928.82633 1440.51383,1908.78421 C1461.25417,1887.91197 1489.9571,1886.4898 1521.55339,1898.91196 C1553.15288,1911.56158 1581.8099,1933.44677 1602.52354,1953.86196 C1623.24253,1974.7544 1636.0192,1994.17684 1635.99998,2012.90202"
                                          id="-"></path>
                                </g>
                            </g>
                        </svg>
                        <p>Lees hoe <br>wij te werk gaan</p>
                    </div>
                    @include('site.components.button', ['buttonText' => $links->method->name, 'modifiers' => ['icon', 'text']])
                </a>
            </div>
        </div>
    </div>
    @include('svg.bottom-left-corner-curve-large')
</section>