Systembox mit Text auf Bild

<div class="welcomeBoxContent">
<h2>Willkommen im</h2>
<h2>Suzuki Forum</h2>
<p>Die Community für Suzuki Fahrer und Fans. Teile dein Wissen, hilf anderen und finde alles rund um deine Leidenschaft.</p>
<p>{if $__userAuthConfig->canRegister}<a href="{link controller='Register'}{/link}" class="button buttonPrimary">Registrieren</a>{/if} <a href="#" class="button">Mehr erfahren</a></p>
</div>
<div class="welcomeBoxFooter">
	<div class="welcomeBoxFooterItem">
		<div class="welcomeBoxFooterItemIcon">
			{icon size=24 name='info-circle' type='solid'}
		</div>
		<div class="welcomeBoxFooterItemContent">
			<p>Erfahrung austauschen</p>
			<p><small>Hilf anderen & werde geholfen</small></p>
		</div>
	</div>
	<div class="welcomeBoxFooterItem">
		<div class="welcomeBoxFooterItemIcon">
			{icon size=24 name='book-open' type='solid'}
		</div>
		<div class="welcomeBoxFooterItemContent">
			<p>Probleme lösen</p>
			<p><small>Tipps, Lösungen & Anleitungen</small></p>
		</div>
	</div>
	<div class="welcomeBoxFooterItem">
		<div class="welcomeBoxFooterItemIcon">
			{icon size=24 name='newspaper' type='solid'}
		</div>
		<div class="welcomeBoxFooterItemContent">
			<p>Neuigkeiten</p>
			<p><small>Bleibe auf dem Laufenden</small></p>
		</div>
	</div>
	<div class="welcomeBoxFooterItem">
		<div class="welcomeBoxFooterItemIcon">
			{icon size=24 name='users' type='solid'}
		</div>
		<div class="welcomeBoxFooterItemContent">
			<p>Community</p>
			<p><small>Gemeinsam für Suzuki</small></p>
		</div>
	</div>	
</div>

.welcomeBox {
	background-color: rgba(0,0,0,0) !important;
	border-radius: var(--wcfBorderRadius);
	display: grid;
	position: relative;
	padding: 0 !important;
	overflow: hidden;
    grid-template-areas:
		"welcomeBoxContent"
		"welcomeBoxFooter";
    grid-template-rows: 1fr min-content;
	.boxImage {
		margin: 0;
		overflow: hidden;
		display: flex;
		position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		width: 100%;
		border-radius: var(--wcfBorderRadius);
		max-height: initial;
		img {
			object-fit: cover;
			object-position: center;
			width: 100%;
			max-width: initial;
			border-radius: var(--wcfBorderRadius);
		}
	}
	.boxContent {
		display: contents;
	}
	.welcomeBoxContent {
		grid-area: welcomeBoxContent;
		color: #fff;
		padding: 20px;
		@include screen-xl {
			width: 40%;
		}
		@include screen-lg-only {
			width: 80%;
		}		
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;		
		background-image: linear-gradient(to right,  rgba(0,0,0,0.8) 20%, rgba(0,0,0,0.0) 100%);
		z-index: 1;
		h2 {
			@include screen-md-down {
				font-size: 28px;
			}		
			@include screen-lg {
				font-size: 36px;
			}			
			font-weight: 600;
			text-transform: uppercase;
		}
		h2 + h2 {
			@include screen-md-down {
				font-size: 36px;
			}		
			@include screen-lg {
				font-size: 48px;
			}	
			font-weight: 600;
			text-transform: uppercase;
		}
		p {
			margin: 20px 0;
		}
	}
	.welcomeBoxFooter {
		grid-area: welcomeBoxFooter;
		color: #fff;
		display: grid;
		grid-auto-flow: row;
		background-color: rgba(0,0,0,0.8);
		padding: 10px;
		border-radius: 0 0 var(--wcfBorderRadius) var(--wcfBorderRadius);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		@include screen-md-down {
			grid-template-columns: repeat(2, 50%);
			row-gap: 10px;
		}		
		@include screen-lg {
			grid-template-columns: repeat(4, 25%);
		}
		.welcomeBoxFooterItem {
		    display: flex;
		}
		small {
			color: rgba(255,255,255,0.65);
		}
		.welcomeBoxFooterItemIcon {
			flex-basis: 45px;
			text-align: center;
		}
	}
}