{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<section class="no-pad-bottom no-pad-top projects-gallery">
	<div class="projects-wrapper clearfix">
		<div class="projects-container">
			<div class="col-md-4 col-sm-6 no-pad project print image-holder">
				<div class="background-image-holder">
					<f:if condition="{image1}">
						<media:image asset="{image1}" alt="Background Image" class="background-image" maximumWidth="800" maximumHeight="400" allowCropping="1" allowUpScaling="1" />
					</f:if>
				</div>
				<div class="hover-state">
					<div class="align-vertical">
						{neos:contentElement.editable(property: 'title1', class: 'text-white', tag: 'h3')}
						{neos:contentElement.editable(property: 'text1', class: 'text-white', tag: 'p')}
						<f:if condition="{link1}">
							<{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a href="{link1}"', else: 'span')} class="btn btn-primary btn-white">
								{neos:contentElement.editable(property: 'link1Text')}
							</{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a', else: 'span')}>
						</f:if>
					</div>
				</div>
			</div>
			<div class="col-md-4 col-sm-6 no-pad project print image-holder">
				<div class="background-image-holder">
					<f:if condition="{image2}">
						<media:image asset="{image2}" alt="Background Image" class="background-image" maximumWidth="800" maximumHeight="400" allowCropping="1" allowUpScaling="1" />
					</f:if>
				</div>
				<div class="hover-state">
					<div class="align-vertical">
						{neos:contentElement.editable(property: 'title2', class: 'text-white', tag: 'h3')}
						{neos:contentElement.editable(property: 'text2', class: 'text-white', tag: 'p')}
						<f:if condition="{link2}">
							<{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a href="{link2}"', else: 'span')} class="btn btn-primary btn-white">
							{neos:contentElement.editable(property: 'link2Text')}
						</{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a', else: 'span')}>
						</f:if>
					</div>
				</div>
			</div>
			<div class="col-md-4 col-sm-6 no-pad project print image-holder">
				<div class="background-image-holder">
					<f:if condition="{image3}">
						<media:image asset="{image3}" alt="Background Image" class="background-image" maximumWidth="800" maximumHeight="400" allowCropping="1" allowUpScaling="1" />
					</f:if>
				</div>
				<div class="hover-state">
					<div class="align-vertical">
						{neos:contentElement.editable(property: 'title3', class: 'text-white', tag: 'h3')}
						{neos:contentElement.editable(property: 'text3', class: 'text-white', tag: 'p')}
						<f:if condition="{link3}">
							<{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a href="{link3}"', else: 'span')} class="btn btn-primary btn-white">
							{neos:contentElement.editable(property: 'link3Text')}
						</{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a', else: 'span')}>
						</f:if>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>