@layer components {
	.hero-billboard{
		background-size: auto, auto 400px;
		background-position: 70% 250px, top right;
		align-items: flex-end;
		position: relative;
	}

	.hero-billboard[style*="#24687c"]{
		background-image: url(/images/swirlies-transparent.png) !important;
		background-size: 100%;
		background-position: center;
		color: white;
		align-items: center;
	}

	@media(min-width: 768px){
		.hero-billboard{
			background-size: 100%, cover;
			background-position: center;
			align-items: center;
		}
	}

	.hero-billboard.large{
		height: auto;
		padding-top: 27.5rem;
	}

	@media(max-width: 767px){
		.hero-billboard.large{
			background-position-y: bottom, top !important;
		}
	}

	@media(min-width: 768px){
		.hero-billboard.large{
			height: 550px;
			padding-top: 0;
			margin-bottom: 0;
			background-position: center 100%, right;
		}
	}

	.hero-billboard.medium{
		height: 340px;
		background-size: 100%, cover;
		background-position: center 100%, center;
	}

	.hero-billboard.small{
		height: 175px;
	}

	.hero-billboard .overlay{
		position: absolute;
		left: 0;
		right: 0;
		top: 370px;
		height: 30px;
		background-color: hsla(var(--clr-cream), .8);
		z-index: 0;
		display: block;
	}

	@media(min-width: 768px){
		.hero-billboard .overlay{
			width: 33%;
			min-width: 33rem;
			top: 0;
			bottom: 0;
			right: auto;
			height: auto;
		}
	}

	.hero-billboard .overlay:after{
		content: none;
		border: solid hsla(var(--clr-cream), .8);
		border-top-width: 550px;
		border-left-width: 0;
		border-bottom-color: transparent;
		border-right: 127px solid transparent;
		position: absolute;
		right: -127px;
		top: 0;
	}

	@media(min-width: 768px){
		.hero-billboard .overlay:after{
			content: '';
		}
	}

	.hero-content{
		position: relative;
		margin-bottom: 2rem;
	}

	@media(min-width: 768px){
		.hero-content{
			width: 27%;
			min-width: 26rem;
			margin-bottom: 0;
		}
	}

	.hero-billboard[style*="#24687c"] .hero-content{
		width: auto;
		text-align: center;
		margin-bottom: 0;
	}

	.hero-billboard h1{
		margin-bottom: .75em;
		font-size: var(--fs-step-4);
	}

	.hero-billboard[style*="#24687c"] h1{
		margin: 0;
		text-shadow: -1px 1px 6px rgba(0,0,0,.45);
	}

	.hero-buttons{
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem;
	}
}