.hero-image {
	position: relative;
	z-index: 6;
	margin: 0;
	color: var(--red-alt);
}

.hero-image .slide,
.hero-image .img-cont,
.hero-image .slide-img {
	position: relative;
	z-index: 1;
}

.hero-image .img-cont {
	z-index: 2;
}

.hero-image .slide-img {
	width: 100%;
}

.hero-image .content-section {
	position: relative;
	z-index: 1;
	padding: 36px 20px 48px;
	background: var(--rw-yellow);
}

.hero-image .sponsored {
	display: block;
	position: relative;
	font-size: calc(22rem/16);
	font-weight: var(--font-weight-normal);
	text-transform: uppercase;
	font-family: var(--font-burford);
	line-height: 1;
	letter-spacing: calc(-1.21em/22);
	padding-bottom: 6px;
	margin-bottom: 15px;
}

.hero-image .sponsored:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 30px;
	background-color: var(--salmon-alt);
	pointer-events: none;
}

.hero-image .slide-title {
	margin-bottom: 16px;
	font-family: var(--font-santa-bold);
	font-weight: normal;
	font-size: 1.75rem;
	line-height: 1;
	color: inherit;
}

.hero-image .slide-desc {
	margin: 0;
	font-family: var(--font-forma);
	font-weight: normal;
	font-size: 0.875rem;
	line-height: calc(20/14);
	color: var(--gray-dark);
}

.hero-image .button-default.salmon::before,
.hero-image .button-default.salmon::after {
	background: var(--salmon-alt);
}

.hero-image .slide-footer {
	margin-top: 25px;
}

@media (min-width: 48em) {
	.hero-image .shared-play-button {
		inset: 20px 20px auto auto;
		transform: none;
	}

	.hero-image .content-section {
		position: absolute;
		inset: auto auto 0 0;
		z-index: 2;
		width: 100%;
		max-width: 720px;
		padding: 29px 57px 33px 58px;
	}

	.hero-image .sponsored {
		font-size: calc(26rem/16);
		margin-bottom: 11px;
	}

	.hero-image .slide-title {
		margin-bottom: 10px;
		font-size: 2.25rem;
	}

	.hero-image .slide-desc {
		font-size: 0.9375rem;
		line-height: calc(22/15);
	}

	.hero-image .slide-footer {
		margin-top: 18px;
	}
}