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

@mixin _oTopperThemeFullBleedImage {

	.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: M) {
		padding: 0;
		.o-topper__content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 20px;
			min-height: 350px;
		}
	}

	@include oPrivateGridRespondTo(M) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: minmax(auto, 480px) 1fr;

		.o-topper__content {
			grid-row: 1;
			grid-column: 1 / span 2;
			width: 50%;
			box-sizing: border-box;
			align-self: center;
			padding-right: 20px;
			background: transparent;
		}

	}
	@include oPrivateGridRespondTo(L) {
		grid-template-rows: minmax(auto, 600px) 1fr;
	}

	@supports (object-fit: cover) {
		.o-topper__visual {
			height: auto;
			@include oPrivateGridRespondTo(M) {
				.o-topper__image {
					height: 480px;
				}
			}
			@include oPrivateGridRespondTo(L) {
				.o-topper__image {
					height: 600px;
				}
			}
		}
	}

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