@mixin ncfBanner() {
	&__trial-banner {
		@include oTypographySerif($scale: 0);
		background-color: #262a33;
		color: white;
		text-align: center;
		line-height: 40px;

		&-img {
			vertical-align: middle;
			margin: 0 0 0 30px;

			@include oGridRespondTo($until: S) {
				display: none;
			}
		}

		&-content {
			margin: 0;
		}
	}

	&__app-banner {
		background: oColorsByName('wheat');
		border-top: 1px solid oColorsByName('black-10');
		border-bottom: 1px solid oColorsByName('black-10');

		&-inner {
			display: grid;
			grid-template-columns: 100px 1fr;
			grid-template-rows: 1fr 1fr;
			column-gap: 14px;
			overflow: hidden;
			max-width: 700px;
			align-items: center;
			margin: 0 auto;
			padding: 10px;

			@include oGridRespondTo($from: M) {
				grid-template-columns: 100px 1fr 240px;
				grid-template-rows: 140px;
			}
		}

		&-image {
			img {
				width: 100px;
			}

			@include oGridRespondTo($until: M) {
				grid-row: span 2;
			}
		}

		&-strong {
			font-weight: oFontsWeight('semibold');
		}

		&-header {
			@include oTypographySerif($scale: 0, $include-font-family: false);
			font-weight: oFontsWeight('semibold');
			margin: 0 0 4px;
		}

		&-action {
			display: inline-block;

			a {
				border: 0;
			}
		}
	}
}