// sass-lint:disable mixins-before-declarations

@mixin _oTopperThemeDeepLandscape($colors) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 150vw 1fr;

	.o-topper__image{
		height:150vw;
	}
	.o-topper__content {
		display:inline-block;
		grid-row: 1;
	  	grid-column: 1 / span 2;
		box-sizing: border-box;
		align-self: end;
		background: transparent;
	  	margin: 0 0 72px 10%;
	}
	.o-topper__headline {
		&::after {
		  	content: none;
		}
	}
	.o-topper__standfirst{
		opacity: 1;
	}


	@each $color-name in $colors {
		$o3-palette-name: if($color-name == 'matisse', 'o3-color-palette-#{$color-name}-blue', 'o3-color-palette-#{$color-name}');
		&.o-topper--color-#{$color-name} {
			$background: oPrivateFoundationGet($o3-palette-name);
			$foreground: oPrivateColorsGetTextColor($background, $opacity: 100);
			.o-topper__content--text-shadow{
				@if $foreground == white{
					text-shadow: 2px 3px 4px rgba(18,18,18,0.4);
				}
			}
			.o-topper__content--background-box {
				padding: oPrivateSpacingByName('s4');
				background-color: if($foreground == white, rgb(18,18,18,0.67), rgb(255,255,255,0.7));
			}
		}
	}

	.o-topper__read-next {
		display: none;
	}
	.o-topper__background {
		grid-row: 1;
	}
	.o-topper__visual {
		grid-row: 1 /span 2;
	}
	&.o-topper--full-bleed-image-center {
		@include oPrivateGridRespondTo(S) {
			@include _oTopperAlignText(center);
		}
	}


	@include oPrivateGridRespondTo( $until:S) {
		.o-topper__content {
			width:100%;
		  	margin: 0 0 oPrivateSpacingByName('s6');
		  	padding: 20px;
		}
	}

	@include oPrivateGridRespondTo($from:S , $until:M) {
		.o-topper__content {
			width:75%;
		}
	}
	@include oPrivateGridRespondTo($from:M , $until:L) {
		.o-topper__content {
			width:50%;
		}
	}

	@include oPrivateGridRespondTo(L) {
		grid-template-rows: 66vw 1fr;

		.o-topper__content {
		  	grid-column: 1;
		  	margin: 0 0 72px;
		}
		.o-topper__image{
			height:66vw;
		}
	}

	@supports (object-fit: cover) {
		.o-topper__visual {
			height: auto;
		}
	}

	.o-topper__image-caption {
		background-color: transparent;
		color: oPrivateFoundationGet("o3-color-palette-black-70");
	}
}