/*
    ==============================
    📱 Mobile
    ==============================
*/

.hero {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.hero-container {
	display: grid;
	gap: var(--space-xs);
	background-color: var(--color-grey-900-50);
	padding: var(--space-xl) var(--space-horizontal);
}

.hero-title {
	margin: auto;
	text-align: center;
	color: var(--color-grey-100);
}

/*
    ==============================
    🖥️ Desktop
    ==============================
*/

@media only screen and (min-width: 1024px) {
	.hero-container {
		padding: var(--space-2xl) var(--space-horizontal);
	}
}