diff --git a/Resources/Public/Sass/_sg-news.scss b/Resources/Public/Sass/_sg-news.scss
new file mode 100644
index 0000000000000000000000000000000000000000..32b22c005593e8d42a9d9c31c76fbf53da9b122a
--- /dev/null
+++ b/Resources/Public/Sass/_sg-news.scss
@@ -0,0 +1,354 @@
+// 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 {
+	margin-top: $margin-base-vertical * -2;
+}
+
+// reduce the gap between the .dark-bg and the comment section
+.tx-sgnews .content.dark-bg + .content {
+	margin-top: $margin-base-vertical * -1;
+}
+
+.tx-sgnews {
+	.tx-sgnews-footer-browser-previous,
+	.tx-sgnews-footer-browser-next {
+		@extend %btn-success;
+	}
+}
+
+.tx-sgnews-teaser-category {
+	background-color: $sg-news-secondary-background-color;
+	color: $sg-news-secondary-foreground-color;
+}
+
+.tx-sgnews-teaser-description {
+	color: $sg-news-foreground-color;
+}
+
+.tx-sgnews-categories,
+.tx-sgnews-overview {
+	.tx-sgnews-teaser-image {
+		background-color: $sg-news-primary-background-color;
+		border-bottom: 1px solid $sg-news-border-color;
+
+		img {
+			border: 1px solid $sg-news-border-color;
+		}
+	}
+
+	.tx-sgnews-teaser-inner,
+	.tx-sgnews-teaser-meta {
+		background: $sg-news-background-color;
+		border-top: 1px solid $sg-news-border-color;
+	}
+
+	.tx-sgnews-teaser-inner {
+		h2,
+		.tx-sgnews-readmore {
+			color: $sg-news-foreground-color;
+		}
+	}
+
+	.tx-sgnews-teaser-meta {
+		background: $sg-news-primary-background-color;
+		color: $sg-news-primary-foreground-color;
+		border: none;
+	}
+
+	.tx-sgnews-category-title {
+		border-bottom: 1px solid $sg-news-secondary-foreground-color;
+	}
+}
+
+.intro-section,
+.main-content {
+	.tx-sgnews-teaser-title {
+		margin: 0 0 20px;
+		text-align: center;
+	}
+
+	.tx-sgnews-teaser-meta {
+		margin-bottom: 60px;
+		text-align: center;
+		font-size: 16px;
+
+		span {
+
+			/* stylelint-disable selector-max-compound-selectors */
+			svg {
+				margin-right: 5px;
+				height: 14px;
+				width: auto;
+				display: inline-block;
+			}
+
+			a {
+				text-decoration: none;
+			}
+
+			/* stylelint-enable */
+		}
+	}
+}
+
+.tx-sgnews .carousel {
+	display: none;
+
+	@media (min-width: $screen-md-min) {
+		display: block;
+	}
+
+	a {
+		text-decoration: none;
+		color: $white-base;
+	}
+
+	.left svg,
+	.right svg {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	.left svg {
+		left: 60px;
+	}
+
+	.right svg {
+		right: 60px;
+	}
+}
+
+.tx-sgnews .tx-sgnews-like-buton .fa-star-o {
+	@include inline-svg($icon-regular-star);
+	content: '';
+	display: inline-block;
+	width: 14px;
+	height: 14px;
+	transform: translateY(1px);
+}
+
+.tx-sgnews .tx-sgnews-like-buton .fa-star {
+	@include inline-svg($icon-solid-star, $black-base);
+	content: '';
+	display: inline-block;
+	width: 14px;
+	height: 14px;
+	transform: translateY(1px);
+}
+
+.tx-sgnews .likes .fa-star {
+	@include inline-svg($icon-solid-star);
+	margin-right: 2px;
+	content: '';
+	display: inline-block;
+	width: 12px;
+	height: 12px;
+	transform: translateY(1px);
+}
+
+.tx-sgnews-meta-bar {
+	@media (max-width: 580px) {
+		flex-direction: column;
+	}
+
+	.social-sharer {
+		flex-grow: 1;
+	}
+
+	ul {
+		@media (max-width: 1023px) {
+			display: grid;
+			grid-template-columns: repeat(4, 1fr);
+
+			@supports (display: grid) {
+				grid-column-gap: 10px;
+			}
+		}
+
+		@media (max-width: 424px) {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+}
+
+.tx-sgnews-teaser-meta {
+	.author {
+		display: inline-block;
+
+		&::before {
+			@include inline-svg($icon-solid-user);
+			margin-right: 5px;
+			content: '';
+			display: inline-block;
+			width: 11px;
+			height: 12px;
+		}
+	}
+
+	.date {
+		display: inline-block;
+
+		&::before {
+			@include inline-svg($icon-solid-calendar-alt);
+			margin-right: 5px;
+			content: '';
+			display: inline-block;
+			width: 11px;
+			height: 12px;
+		}
+	}
+}
+
+.sg-slide-content .tx-sgnews-teaser-meta,
+.tx-sgnews-single-header-content .tx-sgnews-teaser-meta {
+	.author::before,
+	.date::before {
+		display: none;
+	}
+
+	> * {
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+}
+
+.tx-sgnews-meta-bar .tx-sgnews-likes {
+	align-self: flex-start;
+
+	@media (max-width: 580px) {
+		margin-left: 0;
+	}
+}
+
+.sharer-container {
+	display: flex;
+	list-style: none;
+	margin: 0;
+	flex-wrap: wrap;
+}
+
+.sharer {
+	min-width: 90px;
+	width: auto;
+	flex: 1 0 auto;
+	max-width: 160px;
+	margin-right: 1.8%;
+	height: 30px;
+	margin-bottom: 10px;
+	float: left;
+
+	.share_text {
+		color: $white-base;
+		line-height: 30px;
+		font-size: 12px;
+		vertical-align: middle;
+	}
+
+	@media (max-width: 1023px) {
+		margin-right: 10px;
+		max-width: none;
+
+		@supports (display: grid) {
+			margin-right: 0;
+		}
+	}
+
+	a {
+		display: block;
+		position: relative;
+		text-decoration: none;
+		background-color: $sharer-general;
+		height: 30px;
+
+		&:hover {
+			background-color: lighten($sharer-general, 5%);
+		}
+	}
+
+	&.facebook {
+		a {
+			background-color: $sharer-facebook;
+
+			&:hover {
+				background-color: lighten($sharer-facebook, 5%);
+			}
+		}
+	}
+
+	&.twitter {
+		a {
+			background-color: $sharer-twitter;
+
+			&:hover {
+				background-color: lighten($sharer-twitter, 5%);
+			}
+		}
+	}
+
+	&.whatsapp {
+		a {
+			background-color: $sharer-whatsapp;
+
+			&:hover {
+				background-color: lighten($sharer-whatsapp, 5%);
+			}
+		}
+	}
+
+	.fa {
+		width: 30px;
+		height: 20px;
+		line-height: 30px;
+		vertical-align: middle;
+		text-align: center;
+		position: relative;
+		display: inline-block;
+
+		&::after {
+			content: '';
+			display: block;
+			position: absolute;
+		}
+	}
+
+	.fa-facebook {
+		&::after {
+			@include inline-svg($icon-brands-facebook-f);
+			width: 10px;
+			height: 20px;
+			left: 10px;
+		}
+	}
+
+	.fa-twitter {
+		&::after {
+			@include inline-svg($icon-brands-twitter);
+			width: 20px;
+			height: 20px;
+			left: 8px;
+		}
+	}
+
+	.fa-whatsapp {
+		&::after {
+			@include inline-svg($icon-brands-whatsapp);
+			width: 20px;
+			height: 20px;
+			left: 7px;
+		}
+	}
+
+	.fa-envelope {
+		&::after {
+			@include inline-svg($icon-regular-envelope);
+			width: 20px;
+			height: 20px;
+			left: 7px;
+		}
+	}
+}
+
+select[size].tx-sgnews-select.form-control {
+	padding: 5px;
+}