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

@mixin _oTopperThemeSplitTextPortraitLeft($colors) {
	.o-topper__right-rail-content {
		display: none;
	}

	.o-topper__headline {
	  &::after {
		content: none;
	  }
	}

	@include oGridRespondTo($until: M) {
		display:flex;
		flex-direction: column;
		padding: 0;

		.o-topper__content {
			order: 3;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 20px 10px;
		}

		.o-topper__background {
			order: 2;
		}

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

		.o-topper__picture {
			img {
				position : relative;
			}
		}

		.o-topper__image-caption {
			padding-bottom: 10px;
		}
	}

	@include oGridRespondTo(M) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 66vw 1fr;

		.o-topper__content {
			grid-column: 1 / span 1;
			grid-row: 1;
			box-sizing: border-box;
			align-self: center;
		}

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

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

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

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

		.o-topper__image-caption {
			margin-bottom: 0;
			color: var(--o3-color-palette-black-70);
		}
	}

	@supports (object-fit: cover) {
		@include oGridRespondTo(M) {
			.o-topper__visual {
				.o-topper__picture {
					height: 66vw;
				}
			}
		}
	}

	.o-topper__image-credit {
		top: 100%;
	}

	.o-topper__image-caption {
		position: relative;
		width: 100%;
		float: right;
		box-sizing: border-box;
	}
}