@mixin _oTopperThemeBranded {
	.o-topper__content {
		grid-row: 2 / span 3;
		@include oGridRespondTo($until: L) {
			padding: 20px 0;
		}
	}

	.o-topper__right-rail-content {
		grid-row: 2 / span 3;
	}

	@include oGridRespondTo($until: L) {
		// Make the background really full width
		.o-topper__background {
			position: absolute;
		}
	}
}

@mixin _oTopperHasHeadshot {
	.o-topper__tags,
	.o-topper__standfirst,
	.o-topper__summary {
		box-sizing: border-box;
	}

	.o-topper__headline--no-standfirst,
	.o-topper__standfirst,
	.o-topper__summary {
		padding-right: calc(
			#{$_o-topper-headshot-width} + var(--o3-spacing-4xs)
		);
		@include oGridRespondTo(M) {
			padding-right: calc(
				#{$_o-topper-headshot-width-M} + var(--o3-spacing-4xs)
			);
		}
	}

	.o-topper__tags,
	.o-topper__headline {
		@include oGridRespondTo(M) {
			padding-right: calc(
				#{$_o-topper-headshot-width-M} + var(--o3-spacing-4xs)
			);
		}
	}
	// Add padding to prevent headline text colliding with headshot
	// not needed for opinion toppers as they have a different layout
	// meaning there is no risk of collision and we want the headline
	// to take up all of the available space where possible
	&:not(.o-topper--opinion) {
		.o-topper__headline {
			@include oGridRespondTo($until: M) {
				padding-right: calc(
					#{$_o-topper-headshot-width} + var(--o3-spacing-3xs)
				);
			}
		}
	}
}

@mixin _oTopperThemeOpinion {
.o-topper__topic, .o-topper__opinion-genre { 
	font-family: var(--o3-type-body-highlight-font-family); 
	font-size: var(--o3-type-body-highlight-font-size);
	line-height: var(--o3-type-body-highlight-line-height); 
}}

@mixin _oTopperOpinionGenre {
	@extend %_o-topper__tag;
	font-family: var(--o3-type-body-base-font-family);
	font-size: var(--o3-type-body-base-font-size);
	font-weight: var(--o3-type-body-base-font-weight);
	line-height: var(--o3-type-body-base-line-height);
	color: var(--o3-color-palette-oxford);
}

@mixin _oTopperHeadshot {
	position: absolute;
	bottom: 0;
	right: 0;
	width: $_o-topper-headshot-width;
	overflow: hidden;

	@include oGridRespondTo(M) {
		width: $_o-topper-headshot-width-M;
	}

	@include oGridRespondTo(L) {
		bottom: -20px;
	}
}

@mixin _oTopperHeadshotImage {
	max-width: 100%;
	display: block;
}