[TASK] Wrap sg-youtube-items in li tags for easier styling

Resources/Private/Templates/Youtube/Index.html

 <f:layout name="Default" />
 
 <f:section name="main">
-	<div class="sg-youtube">
+	<ul class="sg-youtube">
 		<f:for each="{feed}" as="feedItem">
-			<a class="sg-youtube-item" href="{feedItem.url}">
-				<f:if condition="{feedItem.thumbnail}">
-					<div class="sg-youtube-image">
-						<img src="{feedItem.thumbnail}" />
-					</div>
-				</f:if>
-				<f:if condition="{feedItem.title}">
-					<div class="sg-youtube-title">
-						<h4 class="h4">
-							{feedItem.title}
-						</h4>
-					</div>
-				</f:if>
-				<f:if condition="{feedItem.description}">
-					<div class="sg-youtube-text">
-						<f:format.crop maxCharacters="200">{feedItem.description}</f:format.crop>
-					</div>
-				</f:if>
-			</a>
+			<li class="sg-youtube-item-container">
+				<a class="sg-youtube-item" href="{feedItem.url}">
+					<f:if condition="{feedItem.thumbnail}">
+						<div class="sg-youtube-image" style="background-image: url('{feedItem.thumbnail}');"></div>
+					</f:if>
+					<f:if condition="{feedItem.title}">
+						<div class="sg-youtube-title">
+							<h4 class="h4">
+								{feedItem.title}
+							</h4>
+						</div>
+					</f:if>
+					<f:if condition="{feedItem.description}">
+						<div class="sg-youtube-text">
+							<f:format.crop maxCharacters="200">{feedItem.description}</f:format.crop>
+						</div>
+					</f:if>
+				</a>
+			</li>
 		</f:for>
-	</div>
+	</ul>
 </f:section>