<!-- Works with Liveblog 3.4 -->

<div class="medals">

	<label for="medals.headline" hide-render="">Headline</label>
    <input  class="medals__headline" placeholder=" " name="$medals.headline">

    <label for="medals.text" hide-render="">Additional text</label>
    <input class="medals__subheadline" placeholder=" " name="$medals.text">

	<div class="medals__item">
		
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 178.8 231.6" style="enable-background:new 0 0 178.8 231.6;" xml:space="preserve">
		<g>
			<polygon style="fill:#E85239;" points="60.8,51 119.7,51 172.7,0.3 113.9,0.3 	"/>
			<polygon style="fill:#EAAA42;" points="46.7,41.2 46.7,75.8 56.5,75.8 56.5,51 122.3,51 122.3,75.8 132.1,75.8 132.1,41.2 	"/>
			<polygon style="fill:#F66F53;" points="120.8,50.8 62,50.8 8.9,0 67.8,0 	"/>
			<circle style="fill:#FAD051;" cx="89.4" cy="142.2" r="89.4"/>
			<circle style="fill:#EAAA42;" cx="89.4" cy="142.2" r="67.5"/>
			<g>
				<g>
					<path style="fill:#FAD051;" d="M84.6,116.6h-0.2l-14.3,6.8l-2.9-13.1L87,101h14.5v75h-17L84.6,116.6L84.6,116.6z"/>
				</g>
			</g>
		</g>
		</svg>


	    <div class="medals__name">
	        <label for="medals.name1" hide-render="">First place name</label>
	        <input class="medals__nameText" placeholder="First place name" name="$medals.name1">
	    </div>

	    <div class="medals__result">
			<label for="medals.result1" hide-render="">First place result</label>
			<input class="medals__resultText" placeholder="First place result" name="$medals.result1">
	    </div>
	</div>

	<div class="medals__item">

		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 178.8 231.6" style="enable-background:new 0 0 178.8 231.6;" xml:space="preserve">
<g>
	<polygon style="fill:#E85239;" points="60.9,51.3 119.6,51.3 172.6,0.6 113.9,0.6 	"/>
	<polygon style="fill:#C4C4C4;" points="46.8,41.5 46.8,76 56.6,76 56.6,51.3 122.2,51.3 122.2,76 132,76 132,41.5 	"/>
	<polygon style="fill:#F66F53;" points="120.8,51 62,51 9,0.3 67.8,0.3 	"/>
	<circle style="fill:#E4E7E7;" cx="89.4" cy="142.3" r="89.3"/>
	<circle style="fill:#C4C4C4;" cx="89.4" cy="142.3" r="67.4"/>
	<g>
		<g>
			<path style="fill:#E4E7E7;" d="M62.3,176.1v-10.6l9.7-8.8c16.4-14.6,24.3-23,24.5-31.8c0-6.1-3.7-10.9-12.3-10.9
				c-6.5,0-12.1,3.2-16,6.2l-5-12.6c5.6-4.3,14.4-7.7,24.5-7.7c16.9,0,26.3,9.9,26.3,23.5c0,12.6-9.1,22.6-19.9,32.3l-6.9,5.8v0.2
				h28.2v14.4L62.3,176.1L62.3,176.1z"/>
		</g>
	</g>
</g>
</svg>

	    <div class="medals__name">
	        <label for="medals.name2" hide-render="">Second place name</label>
	        <input class="medals__nameText" placeholder="Second place name" name="$medals.name2">
	    </div>
	    
	    <div class="medals__result">
			<label for="medals.result2" hide-render="">Second place result</label>
			<input class="medals__resultText" placeholder="Second place result" name="$medals.result2">
	    </div>
	</div>

	<div class="medals__item">
		
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 178.8 231.6" style="enable-background:new 0 0 178.8 231.6;" xml:space="preserve">
<g>
	<polygon style="fill:#E85239;" points="60.9,51.5 119.6,51.5 172.5,0.9 113.8,0.9 	"/>
	<polygon style="fill:#CE8452;" points="46.8,41.7 46.8,76.2 56.6,76.2 56.6,51.5 122.2,51.5 122.2,76.2 132,76.2 132,41.7 	"/>
	<polygon style="fill:#F66F53;" points="120.7,51.2 62.1,51.2 9.1,0.6 67.8,0.6 	"/>
	<circle style="fill:#ED9D5D;" cx="89.4" cy="142.4" r="89.2"/>
	<circle style="fill:#CE8452;" cx="89.4" cy="142.4" r="67.3"/>
	<g>
		<g>
			<path style="fill:#ED9D5D;" d="M65.4,159c3.1,1.6,10.2,4.6,17.4,4.6c9.1,0,13.7-4.4,13.7-10c0-7.4-7.4-10.7-15.1-10.7h-7.1v-12.5
				h6.8c5.9-0.1,13.3-2.3,13.3-8.6c0-4.5-3.7-7.8-11-7.8c-6.1,0-12.5,2.6-15.6,4.5l-3.6-12.7c4.5-2.9,13.5-5.6,23.1-5.6
				c16,0,24.9,8.4,24.9,18.6c0,7.9-4.5,14.2-13.7,17.4v0.2c9,1.6,16.2,8.4,16.2,18.2c0,13.2-11.6,22.9-30.6,22.9
				c-9.7,0-17.8-2.5-22.2-5.3L65.4,159z"/>
		</g>
	</g>
</g>
</svg>

	    <div class="medals__name">
	        <label for="medals.name3" hide-render="">Third place name</label>
	        <input class="medals__nameText" placeholder="Third place name" name="$medals.name3">
	    </div>
	    
	    <div class="medals__result">
			<label for="medals.result3" hide-render="">Third place result</label>
			<input class="medals__resultText" placeholder="Third place result" name="$medals.result3">
	    </div>
	</div>
</div>

<style type="text/css">

div.medals {

}

.medals .medals__headline {
	display: block;
	font-size: 1.06em;
	font-weight: bold;
	margin-bottom: .7em;
}

.medals .medals__subheadline {
	display: block;
	margin-bottom: 25px;
}

div.medals__item {
	display: flex;
	align-items: center;
	margin-top: 15px;
}

div.medals__item svg {
	flex: 0 0 28px;
	max-height: 33px;
}

div.medals__name {
	flex: 1 1 auto;
}

div.medals__item > * {
	margin-right: 15px;
}

.editor-holder div.medals__item {
	justify-content: space-between;
}

.editor-holder div.medals__item svg {
	flex: 0 0 28px;
}

.editor-holder div.medals__item > * {
	flex: 0 1 45%;
	margin-right: 0px;
}

</style>