.c-simple--404 {
	background-image: url("#{$path-to-img}/heroes/404-lightmode.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;

	& > svg {
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		@include var(color, hero-background-text);
	}

}


.c-simple__hero {
	position: relative;
	border-top: $border-thicker solid;
	@include var(background-color, hero-content-background);
	@include var(border-color, hero-content-accent);
	@include var(color, hero-content-text);
	margin-top: 2rem;
	padding: 1rem 2rem 2rem;
	z-index: 1;

	// Supports
	@supports #{$supports-flex} {
		margin-top: 0;

		// Breakpoints
		@include mappy-bp(palm-large) {
			width: 60%;
		}
	}

	@include mappy-bp(lap-small) {
		padding: 1rem 4rem 2rem;
	}

	// Text-level formatting
	p {
		font-family: $font-family-secondary;
		margin-top: 1.5rem;
	}
}


.c-simple__link {
	@include link-states(link-text);

	/* stylelint-disable-next-line property-no-unknown */
	text-decoration-thickness: $border-thinner;
	text-underline-offset: 0.25em;
}
