/*
 * CSS Reset & Base Layout
 */
*, *::before, *::after {
	box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
	margin: 0;
}

img, picture {
	max-width: 100%;
	display: block;
}

input, button, textarea, select {
	font: inherit;
}

ul[class], ol[class] {
	padding: 0;
	list-style: none;
}

/* 
 * Layout Containers
 */
.container {
	width: 100%;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.container--narrow {
	max-width: 800px;
}

.container--wide {
	max-width: 1920px;
}

/*
 * Utility Classes
 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* Flex & Grid Utilities */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }

.d-grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.grid-cols-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.grid-cols-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }