.home-layout {
	position: relative;
	min-height: 100vh;
	max-width: 1400px;
	margin: 0 auto;
	padding: var(--env-var-spacing-2);
}

/* TODO go for this approach for responsiveness. The aside needs to be taken care of */
/* @media (max-width: 1000px) {
	.home-layout {
		flex-direction: column !important;
	}
} */

.home-layout aside {
	position: sticky;
	top: var(--env-var-spacing-2);
	left: 0;

	height: calc(100vh - var(--env-var-spacing-2) * 2);
	max-width: var(--env-var-side-bar-width);
}

.home-layout > div {
	min-height: calc(100vh - var(--env-var-spacing-2) * 2);
	flex: 1;
}

.home-layout > div:has(> [class*="fallback__"]) .background-pattern-svg {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;

	width: 100%;
	max-width: 800px;
	height: 100%;
	max-height: 800px;

	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
