com.xaymar.www/_sass/_block-columns.scss

// --------------------------------------------------------------------------------
// Columns
// --------------------------------------------------------------------------------
columns {
	display: grid;
	grid-column-gap: 0.75rem;
	grid-row-gap: 0.75rem;
}

columns[count="2"] {
	grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 2 - 5rem), 1fr));
}

columns[count="3"] {
	grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 3 - 5rem), 1fr));
}

columns[count="4"] {
	grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 4 - 5rem), 1fr));
}

// Columns: Horizontal Alignment
columns.halign-start,
columns.halign-left {
	align-items: start;
}

columns.halign-end,
columns.halign-right {
	align-items: end;
}

columns.halign-center,
columns.halign-middle {
	align-items: center;
}

columns.halign-baseline,
columns.halign-text {
	align-items: baseline;
}

columns.halign-stretch,
columns.halign-fill {
	align-items: stretch;
}

columns.valign-start,
columns.valign-left {
	justify-items: start;
}

columns.valign-end,
columns.valign-right {
	justify-items: end;
}

columns.valign-center,
columns.valign-middle {
	justify-items: center;
}

columns.valign-baseline,
columns.valign-text {
	justify-items: baseline;
}

columns.valign-stretch,
columns.valign-fill {
	justify-items: stretch;
}

// --------------------------------------------------------------------------------
// Individual Column
// --------------------------------------------------------------------------------
column {
	padding: 0 0;
}

column ~ column {
	margin-top: 0;
}

// --------------------------------------------------------------------------------
// Fix Headings inside Columns
// --------------------------------------------------------------------------------
column > h1,
column > h2,
column > h3,
column > h4,
column > h5,
column > h6 {
	margin: 0;
}