<style>
.center {
	justify-content: center;
	text-align: center;
}
.left {
	justify-content: flex-start;
	text-align: left;
}
.right {
	justify-content: flex-end;
	text-align: right;
}
</style>
<aside id="mainimg">

<div class="slide slide1 {{POSITION1}}" style="background: url('./uploads/{{MAINIMG1}}') no-repeat center center / cover;">
<div>
<h2>{{TITLE1}}{{#IF_TITLE1_EN}}<span>{{TITLE1_EN}}</span>{{/IF_TITLE1_EN}}</h2>
{{#IF_TEXT1}}<p>{{TEXT1}}</p>{{/IF_TEXT1}}
</div>
</div>

<div class="slide slide2 {{POSITION2}}" style="background: url('./uploads/{{MAINIMG2}}') no-repeat center center / cover;">
<div>
<h2>{{TITLE2}}{{#IF_TITLE2_EN}}<span>{{TITLE2_EN}}</span>{{/IF_TITLE2_EN}}</h2>
{{#IF_TEXT2}}<p>{{TEXT2}}</p>{{/IF_TEXT2}}
</div>
</div>

<div class="slide slide3 {{POSITION3}}" style="background: url('./uploads/{{MAINIMG3}}') no-repeat center center / cover;">
<div>
<h2>{{TITLE3}}{{#IF_TITLE3_EN}}<span>{{TITLE3_EN}}</span>{{/IF_TITLE3_EN}}</h2>
{{#IF_TEXT3}}<p>{{TEXT3}}</p>{{/IF_TEXT3}}
</div>
</div>

<div id="loading-text">loading...</div>

</aside>
