header
{
	display: block;
	position: relative;
	height: clamp(10em, 40dvh, 50em);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 90%, 5% 90%, 0 80%);
	
	.gfx-wrapper
	{
		height: 100%;
		width: 100%;
		position: relative;
		z-index: 2;
		background: var(--splash-color-3);
	}
	
	.image-wrapper
	{
		height: 100%;
		width: 100%;
		position: relative;
		z-index: 2;
		
		img
		{
			position: absolute;
			object-fit: cover;
			object-position: center;
			height: 100%;
			width: 100%;
		}
	}
	
	.text-wrapper
	{
		position: absolute;
		top: 50%;
		left: clamp(2em, 10dvw, 20em);
		transform: translateY(-50%);
		
		z-index: 3;
		
		*
		{
			color: white;
		}
	}
}

header.empty
{
	.text-wrapper
	{
		*
		{
			color: var(--text-color);
		}
	}
}
header.front
{
	height: clamp(30em, 80dvh, 80em);
}