/**
 * ==========================================
 * Qustro Layout
 * ==========================================
 */

/* Main Container */

.qustro-container {
	width: 100%;
	max-width: var(--qustro-container-width);
	margin: 0 auto;
	padding-left: var(--qustro-container-padding);
	padding-right: var(--qustro-container-padding);
}

/* Common Section */

section {
	padding: var(--qustro-space-4xl) 0;
}

/* Section Header */

.qustro-section-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--qustro-space-3xl);
}

.qustro-section-header h2 {
	margin-bottom: var(--qustro-space-md);
}

.qustro-section-header p {
	margin-bottom: 0;
}

/* Common Section Footer */

.qustro-section-footer {
	text-align: center;
	margin-top: var(--qustro-space-2xl);
}

/* Grid */

.qustro-grid {
	display: grid;
	gap: var(--qustro-space-xl);
}

/* Two Columns */

.qustro-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--qustro-space-xl);
}

/* Three Columns */

.qustro-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--qustro-space-xl);
}

/* Four Columns */

.qustro-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--qustro-space-xl);
}

/* Flex */

.qustro-flex {
	display: flex;
}

.qustro-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.qustro-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Width Helpers */

.qustro-w-100 {
	width: 100%;
}

.qustro-text-center {
	text-align: center;
}