{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<section class="stat-counters duplicatable-content">

	<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-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
				{neos:contentElement.editable(property: 'title', class: 'text-white' tag: 'h1')}
			</div>
		</div>

		<div class="row">

			<div class="col-md-3 col-sm-6">
				<div class="stat feature">
					<div class="stat-bubble">
						{neos:contentElement.editable(property: 'stat1', tag: 'span')}
					</div>
					{neos:contentElement.editable(property: 'lead1', tag: 'h3')}
				</div>
			</div>

			<div class="col-md-3 col-sm-6">
				<div class="stat feature">
					<div class="stat-bubble">
						{neos:contentElement.editable(property: 'stat2', tag: 'span')}
					</div>
					{neos:contentElement.editable(property: 'lead2', tag: 'h3')}
				</div>
			</div>

			<div class="col-md-3 col-sm-6">
				<div class="stat feature">
					<div class="stat-bubble">
						{neos:contentElement.editable(property: 'stat3', tag: 'span')}
					</div>
					{neos:contentElement.editable(property: 'lead3', tag: 'h3')}
				</div>
			</div>

			<div class="col-md-3 col-sm-6">
				<div class="stat feature">
					<div class="stat-bubble">
						{neos:contentElement.editable(property: 'stat4', tag: 'span')}
					</div>
					{neos:contentElement.editable(property: 'lead4', tag: 'h3')}
				</div>
			</div>

		</div>

	</div>
</section>