/**
 * Homepage 3D — layout primitives
 */

.homepage-3d__container {
	width: 100%;
	max-width: var(--h3d-container);
	margin-inline: auto;
	padding-inline: var(--h3d-gutter);
}

.homepage-3d__container--wide {
	max-width: var(--h3d-container-wide);
}

.homepage-3d__main {
	outline: none;
}

.homepage-3d__section {
	padding-block: var(--h3d-section-space);
}

.homepage-3d__section--surface {
	background: var(--h3d-color-surface);
}

.homepage-3d__section--dark {
	background: var(--h3d-color-dark);
	color: var(--h3d-color-text-on-dark);
}

.homepage-3d__section--dark h2,
.homepage-3d__section--dark h3 {
	color: var(--h3d-color-text-on-dark);
}

.homepage-3d__section--dark p {
	color: var(--h3d-color-text-muted-on-dark);
}

.homepage-3d__grid {
	display: grid;
	gap: var(--h3d-card-gap);
}

.homepage-3d__grid--2 {
	grid-template-columns: 1fr;
}

.homepage-3d__grid--3 {
	grid-template-columns: 1fr;
}

.homepage-3d__grid--4 {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.homepage-3d__grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.homepage-3d__grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.homepage-3d__grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.homepage-3d__grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.homepage-3d__grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}