{{ $data := index site.Data site.Language.Lang }}

{{ if $data.feature.feature.enable }}
{{ with $data.feature.feature }}
{{"<!-- feature -->" | safeHTML}}
<section class="section section-bg p-3" id="feature">
	<div class="container-fluid">
		<div class="row justify-content-center align-items-center">
			<div class="col-12 col-md-2 m-md-0 m-5 m-md-3" style="height: 150px; background-image: url('{{ .image_webp | absURL }}'); background-size: contain; background-position: center; background-repeat: no-repeat; ">
				<!-- this image is for trigger this section fallback background image -->
				<img src="{{ .image_webp | absURL }}" style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .image | absURL }})'" loading="lazy">
			</div>
			<div class="col-12 col-md-9">
				<div class="content-block">
					<h2>{{ .title | markdownify }}</h2>
					<p>{{ .content | markdownify }}</p>
					{{ with .call_to_action }}
					<div class="text-center text-md-left">
						<a class="btn btn-primary" href="{{ .link | safeURL }}">{{ .text }}</a>
					</div>
					{{ end }}
					<div class="row">
						{{ range .feature_item }}
						<div class="col-lg-6">
							<div class="media">
								{{with .icon}}
								<div class="align-self-start mr-3">
									<i class="{{ . }}"></i>
								</div>
								{{ end }}
								<div class="media-body">
									<h4 class="media-heading">{{ .title | markdownify }}</h4>
									<p>{{ .content | markdownify }}</p>
								</div>
							</div>
						</div>
						{{ end }}
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
{{"<!-- /feature -->" | safeHTML}}
{{ end }}
{{ end }}