{{ with .Params.mogelijkheden_section }}

<section class="possibilities py-5 my-lg-5">
    <div class="container">
        <div class="row mb-5">
            <div class="col-lg-7">
                <span class="text-primary h6 mb-2 d-block" data-aos="fade-right" data-aos-delay="0">{{ .subtitle }}</span>
                <h2 class="display-5 fw-bold mb-4" data-aos="fade-right" data-aos-delay="100">{{ .title }}</h2>
            </div>
            <div class="col-lg-5 ps-lg-5 d-flex align-items-center" data-aos="fade-left" data-aos-delay="200">
                <p class="border-start ps-4">{{ .intro_text }}</p>
            </div>
        </div>

        <div class="row g-4">
            {{ range $i, $e := .kaarten }}
            {{ $delay := add 400 (mul $i 200) }} {{ if .is_large }}
                <div class="col-lg-6" data-aos="fade-right" data-aos-delay="{{ $delay }}">
                    <div class="card h-100 border-0 overflow-hidden rounded-4 bg-primary text-white position-relative">
                        
                        <div class="position-absolute svg-bg-container start-0 top-0 w-100 h-100 d-flex align-items-center pointer-events-none" style="opacity: 0.1; z-index: 0;">
                            <svg class="scroll-draw-svg" width="100%" height="100%" viewBox="30 0 129 238" fill="none">
                                <path class="drawing-line" style="transition: stroke-dashoffset 10s ease-in, opacity 1s ease;" d="m 20.442137,235.76187 c 7.97,0.148 15.26,0.282 15.26,0.282 0,0 5.6,-29.107 3.44,-44.825 -2.16,-15.684 -20.17,-35.483 -15.56,-36.094 4.6,-0.613 21.99,23.604 20.57,15.403 -1.42,-8.196 2.39,-70.709097 4.53,-56.701 2.13,14.032 1.45,62.792 6.57,53.289 5.11,-9.475 19.71,-35.554 15.97,-24.644 -3.75,10.94 -17.18,32.025 -10.65,30.711 6.52,-1.311 29.94,-2.169 27.07,-19.195 -2.86,-16.988 -6.81,-20.778 -1.18,-33.053 5.62,-12.233 5.51,-18.799 -2.42,-30.005497 -7.92,-11.2069 -13.74,-11.4238 -11.99,-24.4402 1.74,-12.9824 11.4,-13.3108 -2.95,-24.7501 -14.37,-11.461 -30.29,-42.48843064 -25.74,-40.1119497 4.56,2.37338 -13.59,1.52749 -13.42,15.9877497 0.16,14.4944 7.32,14.8073 4.17,24.1056 -3.15,9.32 -16,29.2428 -10.04,36.0531 5.97,6.8103 13.92,16.6168 2.92,27.978297 -11.04,11.415 -25.6900002,-5.298 -25.4900002,17.596 0.2,22.987 14.8300002,33.06 14.9200002,41.984 0.09,8.935 1.51,17.921 8.82,21.831 7.3,3.904 40.06,-2.736 36.12,-4.316 -3.95,-1.583 -9.71,9.422 -8.84,25.838 0.87,16.455 -3.64,24.61 7.59,26.321 11.19,1.704 20.97,-1.103 20.83,-10.805 -0.16,-9.688 -10.56,-50.755 -5.27,-46.178 5.28,4.576 13.26,15.135 14.46,9.242 1.21,-5.887 0.4,-15.507 0.4,-15.507 0,0 -1.31,-40.481 1.48,-28.661 2.78,11.836 4.61,43.586 9.010003,35.573 4.4,-7.991 13.81,-23.167 8.85,-12.288 -4.98,10.913 -15.210003,19.514 -16.370003,28.366 -1.15,8.868 5.27,3.823 15.550003,-1.85 10.24,-5.657 22.41,-9.038 17.68,-20.917 -4.73,-11.873 -0.87,-11.768 -1.81,-27.17 -0.94,-15.362 -18.97,-17.395 -17.95,-31.957 1.03,-14.519197 9.25,-20.759397 1.35,-32.644897 -7.91,-11.8886 -13.930003,-26.5844 -17.030003,-19.4797 -3.09,7.117 8.780003,24.9731 6.43,37.971 -2.36,13.034597 -6.67,25.310597 1.8,29.970597 8.470003,4.657 18.750003,4.248 17.630003,12.983 -1.13,8.753 0.28,15.389 1.07,22.751 0.78,7.371 -14.38,26.888 -16.07,41.655 -1.7,14.811 -6.080003,25.141 5.64,25.367" 
                                      stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>

                        <div class="row g-0 h-100 position-relative" style="z-index: 1;">
                            <div class="col-md-6 p-4 p-lg-5 d-flex flex-column justify-content-center">
                                <h3 class="h3 mb-4 text-white">{{ .title }}</h3>
                                <p class="mb-5 opacity-90">{{ .text }}</p>
                                <a href="{{ .link_url }}" class="text-white text-decoration-none fw-bold mt-auto">
                                    {{ .link_text }} <i class="bi bi-chevron-right ms-1"></i>
                                </a>
                            </div>
                            <div class="col-md-6 h-100">
                                <img src="{{ .image | relURL }}" alt="{{ .title }}" class="h-100 w-100 object-fit-cover">
                            </div>
                        </div>
                    </div>
                </div>
                {{ else }}
                
                <div class="col-lg-3 col-md-6" data-aos="fade-left" data-aos-delay="{{ $delay }}">
                    <div class="card h-100 border-0 rounded-4 bg-light overflow-hidden">
                        <div class="p-4">
                            <h3 class="h4 mb-3">{{ .title }}</h3>
                            <p class="mb-4">{{ .text }}</p>
                            <a href="{{ .link_url }}" class="text-dark text-decoration-none fw-bold small">
                                {{ .link_text }} <i class="bi bi-chevron-right ms-1 text-primary"></i>
                            </a>
                        </div>
                        <img src="{{ .image | relURL }}" alt="{{ .title }}" class="mt-auto w-100 object-fit-cover" style="height: 200px;">
                    </div>
                </div>
                {{ end }}
            {{ end }}
        </div>
    </div>
</section>

{{ end }}