// 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;
	}

	.o-topper__right-rail-content {
		display: none;
	}
	.o-topper__background {
		grid-row: 1;
	}
	.o-topper__visual {
		grid-row: 1 /span 2;
	}

	&.o-topper--full-bleed-image-center {
		@include oGridRespondTo(S) {
			@include _oTopperAlignText(center);
		}
	}


	@include oGridRespondTo( $until:S) {
		.o-topper__content {
			width:100%;
		  	margin: 0 0 var(--o3-spacing-s);
		  	padding: 20px;
		}
	}

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

	@include oGridRespondTo(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: var(--o3-color-palette-black-70);
	}
}