/* Container */
html,
body {
	overflow-x: hidden;
	overflow-x: clip;
}

.st-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-4);
	padding-right: var(--spacing-4);
}

/* Grids */
.st-grid {
	display: grid;
	gap: var(--spacing-6);
}

.st-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

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

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

/* Sections */
.st-section {
	padding-top: var(--spacing-10);
	padding-bottom: var(--spacing-10);
}

.st-section--light {
	background-color: var(--color-bg-light);
}

.st-section--dark {
	background-color: var(--color-bg-dark);
	color: var(--color-text-light);
}