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

@mixin _oTopperThemeFullBleedOffset {
	&.o-topper--right-rail {
		.o-topper__image-caption {
			@if not $o-topper-snappy {
				@include oPrivateGridRespondTo(L) {
					width: calc(100vw - 720px);
				}
			}
			@include oPrivateGridRespondTo(XL) {
				width: calc(50vw - 110px);
			}
		}
	}
	
	display: flex;
	flex-direction: column;
	
	@include oPrivateGridRespondTo($until: L) {
		margin: 0 auto;
		padding: 0;

		.o-topper__background {
			position: absolute;
			height: 100%;
		}
	}

	.o-topper__read-next {
		display: none;
	}

	.o-topper__content {
		padding: 20px 10px;
		order: 2;

		@include oPrivateGridRespondTo(M) {
			padding-left: 20px;
			padding-right: 20px;
		}
	}

	&.o-topper--color-paper .o-topper__content {
		padding-bottom: 0;
	}

	@include oPrivateGridRespondTo(M) {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: 20px 520px 60px min-content;

		.o-topper__content {
			grid-column: 1;
			grid-row: 3 / span 2;
		}

		.o-topper__visual {
			grid-column: 1;
			grid-row: 1 / span 4;
		}
	}


	//Add extra 20px columns to get the space outside the content well
	@include oPrivateGridRespondTo(L) {
		grid-template-columns: 40px 0px 20px minmax(500px, 700px) 20px minmax(0, auto) 300px;

		&.o-topper--centered {
			grid-template-columns: 40px 1fr 0 minmax(500px, 700px) 40px 1fr 40px;
		}

		.o-topper__content {
			grid-column: 4 / span 2;
		}

		.o-topper__background {
			grid-column: 1 / span 7;
			grid-row: 4 / span 2;
		}

		.o-topper__visual {
			grid-column: 1 / span 7;
			left: 0px;
			margin-left: 0px;
			width: inherit;
			overflow: visible;
		}

		.o-topper__picture {
			position: relative;
			width: 100vw;
			margin-left: -50vw;
			left: 50%;
			height: 600px;
			display: block;
		}
	}
	@include oPrivateGridRespondTo(XL) {
		grid-template-columns: 40px 40px 20px minmax(500px, 700px) 40px minmax(0, auto) 300px;
	}

	@supports (object-fit: cover) {
		.o-topper__visual {
			height: auto;
		}
	}
	
	@include oPrivateGridRespondTo( $from: M , $until: L ) {
		display: flex;
	}

	.o-topper__image-caption {
		text-align: left;
		@include oPrivateGridRespondTo(L) {
			box-sizing: border-box;
			padding-left: 0px;
			min-width: 320px;
			transform: translate(20px, 0);
			width: calc(100vw - 800px);
			float: right;
		}
		@include oPrivateGridRespondTo($from: XL) {
			transform: translate(calc(50vw - 590px), 0);
			width: calc(50vw - 250px);
		}
		@if $o-topper-snappy {
			@include oPrivateGridRespondTo($from: L, $until: XL) {
				transform: translate(calc(50vw - 470px), 0);
				width: calc(50vw - 170px);
			}
		}
		
	}

	
}