[TASK] Add one column layout to latest news teaser

Resources/Private/Partials/TeaserContentOverview.html

+<f:link.page pageUid="{newsMetaData.news.uid}">
+	<div class="sg-slide-news-content">
+		<div class="tx-sgnews-teaser-title">
+			{headerTag -> f:format.raw()}
+			{newsMetaData.news.subtitleWithFallbackToTitle}
+			{closingHeaderTag -> f:format.raw()}
+		</div>
+
+		<div class="tx-sgnews-teaser-description">
+			<f:format.html>{newsMetaData.news.description}</f:format.html>
+		</div>
+	</div>
+</f:link.page>

Resources/Private/Templates/Latest/Index.html

 <f:layout name="Default" />
 
 <f:section name="main">
+	<f:switch expression="{settings.layout}">
+		<f:case value="content">
+			<f:render section="layout-content" arguments="{_all}" />
+		</f:case>
+		<f:defaultCase>
+			<f:render section="layout-default" arguments="{_all}" />
+		</f:defaultCase>
+	</f:switch>
+</f:section>
+
+<f:section name="layout-content">
+	<div id="carousel-latest-news" class="sg-slide-element sg-slide-not-initialized sg-slide-layout--{settings.layout}" data-interval="0"
+		 data-columns="{f:if(condition: '{newsMetaData -> f:count()} > {settings.columns}}', then: '{settings.columns}', else: '{newsMetaData -> f:count()}')}">
+		<div class="sg-slide-track">
+			<div class="sg-slide-container">
+				<f:for each="{newsMetaData}" as="newsMetaDataEntry" iteration="iterator">
+					<div class="sg-slide {f:if(condition: '{iterator.isFirst}', then: 'active')}">
+						<f:render partial="TeaserContentOverview" arguments="{
+						newsMetaData: newsMetaDataEntry,
+						headerTag: '<h3 class=\"text-left\">',
+						closingHeaderTag: '</h3>',
+						showCategory: 0
+						}" />
+					</div>
+				</f:for>
+			</div>
+		</div>
+
+		<f:if condition="{newsMetaData -> f:count()} > {settings.columns}">
+			<ul class="sg-slide-dots">
+				<f:for each="{newsMetaData}" as="data_item" iteration="iterator">
+					<li class="sg-slide-dots__indicator"><a class="sg-slide-dots__trigger"></a></li>
+				</f:for>
+			</ul>
+
+			<div class="sg-slide-prev">
+				<i class="fa fa-angle-left fa-5x" aria-hidden="true"><span class="sr-only">Previous</span></i>
+			</div>
+			<div class="sg-slide-next">
+				<i class="fa fa-angle-right fa-5x" aria-hidden="true"><span class="sr-only">Next</span></i>
+			</div>
+		</f:if>
+	</div>
+</f:section>
+
+<f:section name="layout-default">
 	<div id="carousel-latest-news" class="sg-slide-element sg-slide-not-initialized sg-slide-medium" data-interval="0">
 		<div class="sg-slide-track">
 			<div class="sg-slide-container">
@@ -11,7 +57,7 @@
 						headerTag: '<h3 class=\"text-center\">',
 						closingHeaderTag: '</h3>',
 						showCategory: 1
-					}" />
+						}" />
 					</div>
 				</f:for>
 			</div>

Resources/Public/Sass/_layout-content.scss

+.sg-slide-layout--content {
+	.sg-slide-track,
+	.sg-slide-container {
+		background: transparent;
+	}
+
+	.main-content & {
+		.sg-slide-next,
+		.sg-slide-prev {
+			width: 40px;
+			background: transparent;
+			display: flex;
+		}
+
+		.sg-slide-next {
+			right: -5px;
+
+			.fa-angle-right {
+				@include inline-svg($icon-chevron, $sg-news-chevron-color);
+			}
+		}
+
+		.sg-slide-prev {
+			left: -5px;
+
+			.fa-angle-left {
+				@include inline-svg($icon-chevron, $sg-news-chevron-color);
+			}
+		}
+	}
+
+	.sg-slide-dots {
+		display: block;
+		bottom: -10px;
+	}
+
+	.sg-slide-news-content {
+		margin-bottom: 16px;
+		padding: 0 35px
+	}
+
+	a {
+		&:hover,
+		&:focus {
+			text-decoration: none;
+		}
+	}
+}

Resources/Public/Sass/_sg-news.scss

+@import "layout-content";
+
 // sg_news SingleView pages have two intro-sections,
 // so we need to remove the duplicate white space created by the first one
 .intro-section + .main-content .tx-sgnews {