{{ 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-secondary text-uppercase tracking-widest mb-2 d-block">Mogelijkheden</span>
                <h2 class="display-5 fw-bold mb-4">{{ .title }}</h2>
            </div>
            <div class="col-lg-5 ps-lg-5 d-flex align-items-center">
                <p class="border-start ps-4">{{ .intro_text }}</p>
            </div>
        </div>

        <div class="row g-4">
            {{ range .kaarten }}
                {{ if .is_large }}
                <div class="col-lg-6">
                    <div class="card h-100 border-0 overflow-hidden rounded-4 shadow-sm bg-primary text-white">
                        <div class="row g-0 h-100">
                            <div class="col-md-6 p-4 p-lg-5 d-flex flex-column justify-content-center">
                                <h3 class="h2 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">
                    <div class="card h-100 border-0 rounded-4 shadow-sm 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 }}