{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<section class="image-divider overlay duplicatable-content threesteps">
	<div class="background-image-holder parallax-background">
		<f:if condition="{image}">
			<media:image asset="{image}" alt="Background Image" class="background-image" maximumWidth="2000" maximumHeight="1500" allowCropping="1" allowUpScaling="1" />
		</f:if>
	</div>

	<div class="container">
		<div class="row">
			<div class="col-sm-8 col-sm-offset-2 text-center">
				{neos:contentElement.editable(property: 'intro', class: 'text-white alt-font', tag: 'span')}
				{neos:contentElement.editable(property: 'title', class: 'text-white' tag: 'h1')}
			</div>
			<div class="col-sm-4">
				<div class="feature feature-icon-large">
					<i class="text-white icon {stepIcon1}"></i>
					{neos:contentElement.editable(property: 'subTitle1', class: 'text-white', tag: 'h5')}

					{neos:contentElement.editable(property: 'lead1', class: 'text-white', tag: 'p')}
				</div>
			</div>

			<div class="col-sm-4">
				<div class="feature feature-icon-large">
					<i class="text-white icon {stepIcon2}"></i>
					{neos:contentElement.editable(property: 'subTitle2', class: 'text-white', tag: 'h5')}

					{neos:contentElement.editable(property: 'lead2', class: 'text-white', tag: 'p')}
				</div>
			</div>

			<div class="col-sm-4">
				<div class="feature feature-icon-large">
					<i class="text-white icon {stepIcon3}"></i>
					{neos:contentElement.editable(property: 'subTitle3', class: 'text-white', tag: 'h5')}

					{neos:contentElement.editable(property: 'lead3', class: 'text-white', tag: 'p')}
				</div>
			</div>
		</div>
	</div>
</section>