/* ==========================================
   LAYOUT
========================================== */

/* Containers */

.ss-container {
	width: min(100% - (var(--ss-container-padding) * 2), 1200px);
	margin-inline: auto;
}

.ss-container-narrow {
	width: min(100% - (var(--ss-container-padding) * 2), 800px);
	margin-inline: auto;
}

.ss-container-wide {
	width: min(100% - (var(--ss-container-padding) * 2), 1400px);
	margin-inline: auto;
}

.ss-section {
	padding-block: var(--ss-section-padding);
}

.ss-section-sm {
	padding-block: var(--ss-space-6);
}

.ss-section-lg {
	padding-block: var(--ss-space-9);
}


/* Grid */

.ss-grid {
	display: grid;
	gap: var(--ss-grid-gap);
}

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

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

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

.ss-grid-auto {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 768px) {

	.ss-grid-2,
	.ss-grid-3,
	.ss-grid-4 {
		grid-template-columns: 1fr;
	}

}