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

@mixin _oTopperThemeSplitText {
	.o-topper__read-next {
		display: none;
	}

	&.o-topper--split-text-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 10px;
		}

		.o-topper__visual {
			min-height: 350px;
		}

		.o-topper__picture {
			position: relative;
			width: 100%;
			height: 350px;
			float: right;
		}
	}

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

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

		.o-topper__background {
			grid-row: 1;
		}

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

		.o-topper__picture {
			width: 50%;
			float: right;
			height: auto;
			position: relative;
		}

		.o-topper__image {
			@include oPrivateGridRespondTo($until: M) {
				max-height: 480px;
			}
		}
	}

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

	@supports (object-fit: cover) {
		.o-topper__image {
			position: absolute;
		}

		.o-topper__visual {
			@include oPrivateGridRespondTo(M) {
				.o-topper__picture {
					height: 480px;
				}
			}

			@include oPrivateGridRespondTo(L) {
				.o-topper__picture {
					height: 600px;
				}
			}
		}
	}
	.o-topper__image-credit {
		top: 350px;
		@include oPrivateGridRespondTo(M) {
			top: 480px;
		}
		@include oPrivateGridRespondTo(L) {
			top: 600px;
		}
	}
	.o-topper__image-caption {
		color: oPrivateFoundationGet("o3-color-palette-black-70");
		position: relative;
		width: 100%;
		float: right;
		box-sizing: border-box;
	}
}