.section-feature-banner {
	text-align: center;
	padding: 0;

	@media @bp_768 {
		margin: 0 auto;
	}

	&.compare-artist {

		.page {
			padding: 0;
		}

		.section-main {
			max-width: none;
		}

		.banner {
			.box-sizing;
			color: @white;
			background-image: url('https://viberatecdn.blob.core.windows.net/com/landing/banner-compare-artist-mobile.jpg');
			justify-content: flex-start;
			background-position: right -30px center;
			min-height: 100px;
			padding: 20px;

			@media @bp_480 {
				background-position: right center;
			}

			@media @bp_768 {
				min-height: 120px;
				background-image: url('https://viberatecdn.blob.core.windows.net/com/landing/banner-compare-artist-desktop.jpg');
				padding-left: 60px;
				padding-right: 60px;
			}

			@media @bp_1024 {
				padding-left: 80px;
				padding-right: 80px;
			}
		}

		h3 {
			max-width: 200px;
			text-align: left;
			padding: 0;

			@media @bp_768 {
				max-width: 250px;
			}

			@media @bp_1024 {
				max-width: 300px;
			}

			@media @bp_1200 {
				max-width: none;
			}

			&:after {
				content: "";
				background-image: url('../images/svg/icon-arrow-forward.svg');
				background-repeat: no-repeat;
				background-position: left center;
				background-size: 16px;
				width: 16px;
				height: 16px;
				display: inline-block;
				margin-left: 8px;
				vertical-align: middle;
				margin-bottom: 2px;

				@media @bp_1024 {
					width: 26px;
					height: 26px;
					background-size: 26px;
					margin-left: 22px;
					margin-bottom: 5px;
				}
			}
		}
	}

	&.charts-landing-banner {
		display: none;
		
		@media @bp_768 {
			display: block;
		}

		.section-main {
			max-width: @layout-grid-max-width;
		}

		.banner {
			min-height: 120px;
			background-image: url('https://viberatecdn.blob.core.windows.net/com/landing/charts-landing-banner-mobile.jpg');
			color: @white;

			@media @bp_768 {
				background-image: url('https://viberatecdn.blob.core.windows.net/com/landing/charts-landing-banner-tablet.jpg');
				padding: 18px 60px;
			}

			@media @bp_1024 {
				background-image: url('https://viberatecdn.blob.core.windows.net/com/landing/charts-landing-banner-desktop.jpg');
			}

			@media @bp_1440 {
				background-image: url('https://viberatecdn.blob.core.windows.net/com/landing/charts-landing-banner-4k.jpg');
			}
		}
	}

	&.desktop-only {
		display: none;

		@media @bp_768 {
			display: block;
		}
	}

	& + .section-feature-top-features {

		@media @bp_768_max {
			padding-top: 0;
			margin-top: -40px;
		}
	}

	&.white {
		background-color: @white;
	}

	.page {
		margin: 0 -@page_spacer_mobile;

		@media @bp_768 {
			margin: 0 auto;
		}
	}

	.section-main {
		margin: 0 auto;
		max-width: 1100px;
	}

	h2 {
		.font-size(26);
		line-height: 46px;
		font-weight: 500;
		padding-bottom: 30px;
		color: inherit;

		@media @bp_768 {
			.font-size(32);
			padding-bottom: 60px;
		}
	}

	h3 {
		.font-size(22);
		line-height: 30px;
		font-weight: 500;
		padding-bottom: 30px;
		color: inherit;

		@media @bp_768 {
			padding-bottom: 0;
			text-align: left;
			padding-right: 30px;
		}

		@media @bp_1024 {
			.font-size(32);
			line-height: 42px;
			padding-right: 80px;
		}
	}

	.banner {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		padding: 24px;

		@media @bp_768 {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding: 34px 60px;
		}
	}

	.btn-solid {
		text-decoration: none !important;

		@media @bp_768 {
			white-space: nowrap;
		}
	}
}