/* Grid */
.grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 20px auto; }
/* Grid: predefined widths */
.grid.small-fill { grid-template-columns: var(--grid-small-width) auto; }
.grid.fill-small { grid-template-columns: auto var(--grid-small-width); }
.grid.small-small-fill { grid-template-columns: repeat(2, var(--grid-small-width)) auto; }
.grid.small-centered { grid-template-columns: var(--grid-small-width); justify-content: center; }
/* Grid: specific column count */
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Container (flex) */
.container { display: flex; gap: var(--grid-gap); width: 100%; margin: auto; }
.container.center { justify-content: center; align-items: center; }
.container.justify-center { justify-content: center; }
.container.space-between { justify-content: space-between; }
.container.align-center { align-items: center; }
.container.column { flex-direction: column; }

@media (max-width: 1080px) {
	.grid { display: flex; flex-direction: column; }
}