<{assign var="image" value=$data.image}>

<{if $image}>

	<{if $size <= 4}>
		<{assign var="img_w" value="400"}>
		<{assign var="img_h" value="400"}>
	<{elseif $size <= 6}>
		<{assign var="img_w" value="600"}>
		<{assign var="img_h" value="600"}>
	<{elseif $size <= 8}>
		<{assign var="img_w" value="800"}>
		<{assign var="img_h" value="800"}>
	<{else}>
		<{assign var="img_w" value="1000"}>
		<{assign var="img_h" value="1000"}>
	<{/if}>

	<{if $data.img_align == 'background'}>
		<div class="clearfix"></div>

		<span class="img-caption">
			<{if $data.link}>
				<a href="<{$data.link|escape}>">
			<{/if}>
			<figure>
				<img src="<{$image->getSrc($img_w, $img_w, 'box')}>" alt="" />
				<figcaption>
					<h3><{$data.title|escape}></h3>
					<span><{$data.text|escape}></span>
				</figcaption>
			</figure>
			<{if $data.link}>
				</a>
			<{/if}>
		</span>
	<{else}>

		<style type="text/css">
			.img_box<{$tmi}> .img {
				color: white;
				background-image: url("<{$image->getSrc($img_w, $img_w, 'box')}>");
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}
		</style>

		<{capture name="txt"}>
			<div class="col-sm-6 col-md-6 col-lg-4 p-4 text-center">
				<h3><{$data.title|escape}></h3>
				<hr>
				<p><{$data.text|escape}></p>
				<{if $data.link}>
					<p><a href="<{$data.link|escape}>" class="btn btn-dark btn-sm">Læs mere »</a></p>
				<{/if}>
			</div>
		<{/capture}>

		<{capture name="img"}>
			<div class="col-sm-6 col-md-6 col-lg-8 img">
			</div>
		<{/capture}>

		<div class="img_box<{$tmi}>">
			<div class="row">
				<{if $data.img_align == 'right'}>
					<{$smarty.capture.txt}>
					<{$smarty.capture.img}>
				<{elseif $data.img_align == 'left'}>
					<{$smarty.capture.img}>
					<{$smarty.capture.txt}>
				<{/if}>
			</div>
		</div>

	<{/if}>

<{/if}>