:root {
	--gap: 4px;
}
[class*="col_"] { padding: 2px; margin: calc(var(--gap) / 2); display: block; float:left; }
[class*="f_"] { padding: 2px; margin: calc(var(--gap) / 2); display: block; float:left; }
.row { display:flex; flex-wrap: wrap; width:100%; padding: 0; margin: 0; }
.row:has(.col_fill) { display:flex; width: 100%; } .col_fill { flex-grow: 1; }
.row:has(.f_auto) { display:flex; width: 100%; } .f_auto { flex-grow: 1; }
.nowrap { flex-wrap: nowrap !important; }

/*-----------------------------------------------*/
/* variable columns
/*-----------------------------------------------*/
.col_1 { width: calc(8.33% - var(--gap)); }
.col_2 { width: calc(16.66% - var(--gap)); }
.col_3 { width: calc(25% - var(--gap)); }
.col_4 { width: calc(33.33% - var(--gap)); }
.col_5 { width: calc(41.66% - var(--gap)); }
.col_6 { width: calc(50% - var(--gap)); }
.col_7 { width: calc(58.33% - var(--gap)); }
.col_8 { width: calc(66.66% - var(--gap)); }
.col_9 { width: calc(75% - var(--gap)); }
.col_10 { width: calc(83.33% - var(--gap)); }
.col_11 { width: calc(91.66% - var(--gap)); }
.col_12 { width: calc(100% - var(--gap)); }
/*-----------------------------------------------*/
/* variable offsets
/*-----------------------------------------------*/
.off_1 { margin-left: 8.33%; }
.off_2 { margin-left: 16.66%; }
.off_3 { margin-left: 25%; }
.off_4 { margin-left: 33.33%; }
.off_5 { margin-left: 41.66%; }

@media  (max-width: 575.98px) {
	.sm_0 { display: none; }
	.sm_1 { width: calc(8.33% - var(--gap)); }
	.sm_2 { width: calc(16.66% - var(--gap)); }
	.sm_3 { width: calc(25% - var(--gap)); }
	.sm_4 { width: calc(33.33% - var(--gap)); }
	.sm_5 { width: calc(41.66% - var(--gap)); }
	.sm_6 { width: calc(50% - var(--gap)); }
	.sm_7 { width: calc(58.33% - var(--gap)); }
	.sm_8 { width: calc(66.66% - var(--gap)); }
	.sm_9 { width: calc(75% - var(--gap)); }
	.sm_10 { width: calc(83.33% - var(--gap)); }
	.sm_11 { width: calc(91.66% - var(--gap)); }
	.sm_12 { width: calc(100% - var(--gap)); }
	/*-----------------------------------------------*/
	/* variable offsets
	/*-----------------------------------------------*/
	.smo_1 { margin-left: 8.33%; }
	.smo_2 { margin-left: 16.66%; }
	.smo_3 { margin-left: 25%; }
	.smo_4 { margin-left: 33.33%; }
	.smo_x { margin-left:0; }
	/*-----------------------------------------------*/
	/* adaptive text sizing
	/*-----------------------------------------------*/
	.smtx_1 { font-size: 0.50em; }
	.smtx_2 { font-size: 0.85em; }
	.smtx_3 { font-size: 1em; }
	.smtx_4 { font-size: 1.15em; }
	.smtx_5 { font-size: 1.25em; }
}

@media (min-width: 576px) and (max-width: 768.98px) {
	.md_0 { width:0; }
	.md_1 { width: calc(8.33% - var(--gap)); }
	.md_2 { width: calc(16.66% - var(--gap)); }
	.md_3 { width: calc(25% - var(--gap)); }
	.md_4 { width: calc(33.33% - var(--gap)); }
	.md_5 { width: calc(41.66% - var(--gap)); }
	.md_6 { width: calc(50% - var(--gap)); }
	.md_7 { width: calc(58.33% - var(--gap)); }
	.md_8 { width: calc(66.66% - var(--gap)); }
	.md_9 { width: calc(75% - var(--gap)); }
	.md_10 { width: calc(83.33% - var(--gap)); }
	.md_11 { width: calc(91.66% - var(--gap)); }
	.md_12 { width: calc(100% - var(--gap)); }
	/*-----------------------------------------------*/
	/* variable offsets
	/*-----------------------------------------------*/
	.mdo_1 { margin-left: 8.33%; }
	.mdo_2 { margin-left: 16.66%; }
	.mdo_3 { margin-left: 25%; }
	.mdo_4 { margin-left: 33.33%; }
	.mdo_x { margin-left:0; }
	/*-----------------------------------------------*/
	/* adaptive text sizing
	/*-----------------------------------------------*/
	.mdtx_1 { font-size: 0.85em; }
	.mdtx_2 { font-size: 1em; }
	.mdtx_3 { font-size: 1.25em; }
	.mdtx_4 { font-size: 1.75em; }
	.mdtx_5 { font-size: 2em; }
}

@media (min-width: 769px) and (max-width: 1024.98px) {
	.lg_0 { width:0; }
	.lg_1 { width: calc(8.33% - var(--gap)); }
	.lg_2 { width: calc(16.66% - var(--gap)); }
	.lg_3 { width: calc(25% - var(--gap)); }
	.lg_4 { width: calc(33.33% - var(--gap)); }
	.lg_5 { width: calc(41.66% - var(--gap)); }
	.lg_6 { width: calc(50% - var(--gap)); }
	.lg_7 { width: calc(58.33% - var(--gap)); }
	.lg_8 { width: calc(66.66% - var(--gap)); }
	.lg_9 { width: calc(75% - var(--gap)); }
	.lg_10 { width: calc(83.33% - var(--gap)); }
	.lg_11 { width: calc(91.66% - var(--gap)); }
	.lg_12 { width: calc(100% - var(--gap)); }
	/*-----------------------------------------------*/
	/* variable offsets
	/*-----------------------------------------------*/
	.lgo_1 { margin-left: 8.33%; }
	.lgo_2 { margin-left: 16.66%; }
	.lgo_3 { margin-left: 25%; }
	.lgo_4 { margin-left: 33.33%; }
	.lgo_x { margin-left:0; }
	/*-----------------------------------------------*/
	/* adaptive text sizing
	/*-----------------------------------------------*/
	.lgtx_1 { font-size: 1em; }
	.lgtx_2 { font-size: 1.15em; }
	.lgtx_3 { font-size: 1.35em; }
	.lgtx_4 { font-size: 1.60em; }
	.lgtx_5 { font-size: 1.80em; }
}

/*-----------------------------------------------*/
/* heights
/*-----------------------------------------------*/
.ht_1 { height: 100px; }
.ht_2 { height: 200px; }
.ht_3 { height: 300px; }
.ht_4 { height: 400px; }
.ht_5 { height: 500px; }
.ht_6 { height: 600px; }

@media  (max-height: 665.98px) {
	.smht_1 { height: 50px; }
	.smht_2 { height: 75px; }
	.smht_3 { height: 100px; }
	.smht_4 { height: 200px; }
	.smht_5 { height: 300px; }
	.smht_6 { height: 350px; }
}

@media (min-height: 666px) and (max-height: 768.98px) {
	.mdht_1 { height: 75px; }
	.mdht_2 { height: 100px; }
	.mdht_3 { height: 125px; }
	.mdht_4 { height: 225px; }
	.mdht_5 { height: 325px; }
	.mdht_6 { height: 400px; }
}

@media (min-height: 769px) and (max-height: 1024.98px) {
	.lght_1 { height: 75px; }
	.lght_2 { height: 100px; }
	.lght_3 { height: 200px; }
	.lght_4 { height: 300px; }
	.lght_5 { height: 400px; }
	.lght_6 { height: 500px; }
}

/*-----------------------------------------------*/
/* fixed columns
/*-----------------------------------------------*/
.f_25 { min-width: calc(25px - var(--gap)); }
.f_35 { min-width: calc(35px - var(--gap)); }
.f_50 { min-width: calc(50px - var(--gap)); }
.f_75 { min-width: calc(75px - var(--gap)); }
.f_85 { min-width: calc(55px - var(--gap)); }
.f_100 { min-width: calc(100px - var(--gap)); }
.f_125 { min-width: calc(125px - var(--gap)); }
.f_150 { min-width: calc(150px - var(--gap)); }
.f_175 { min-width: calc(175px - var(--gap)); }
.f_200 { min-width: calc(200px - var(--gap)); }
/*------------------------------------------------*/
/* fixed offsets
/*------------------------------------------------*/
.foff_1 { margin-left: 25px; }
.foff_2 { margin-left: 50px; }
.foff_3 { margin-left: 75px; }

/*------------------------------------------------*/
/* Masonry grid
/*------------------------------------------------*/
.gr_masonry { columns: 20rem; counter-reset: grid; }
.gr_masonry_item { break-inside: avoid; margin: 16px;  }
.gr_masonry_item + .gr_masonry_item { margin-top:16px !important; }
.gr_masonry_item::before { counter-increment: grid; }