/*
 * Layout
 * Path: /assets/css/layout.css
 */

/* =========================
   Containers
========================= */

.container {
	width: min(1160px, calc(100% - 40px));
	margin-inline: auto;
}

.container-sm {
	width: min(900px, calc(100% - 40px));
	margin-inline: auto;
}

.container-lg {
	width: min(1320px, calc(100% - 40px));
	margin-inline: auto;
}

.container-fluid {
	width: calc(100% - 40px);
	margin-inline: auto;
}

/* =========================
   Common Sections
========================= */

.section-pad {
	padding: 82px 0;
}

.section-pad-sm {
	padding: 60px 0;
}

.section-pad-lg {
	padding: 110px 0;
}

/* =========================
   Common Grid
========================= */

.grid {
	display: grid;
}

.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

/* =========================
   Utilities
========================= */

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

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.d-flex {
	display: flex;
}

.align-center {
	align-items: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-center {
	justify-content: center;
}

/* =========================
   Responsive
========================= */

@media (max-width: 980px) {

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

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

	.section-pad {
		padding: 70px 0;
	}
}

@media (max-width: 640px) {

	.container,
	.container-sm,
	.container-lg,
	.container-fluid {
		width: calc(100% - 24px);
	}

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

	.section-pad {
		padding: 58px 0;
	}

	.section-pad-sm {
		padding: 40px 0;
	}

	.section-pad-lg {
		padding: 75px 0;
	}
}