.grid { display: grid !important; gap: calc(12px + (24 - 12) * ((100vw - 300px) / (1920 - 300))); }
.grid.no-gap { gap: 0 !important; }
.layout-box.grid { gap: calc(24px + (48 - 24) * ((100vw - 300px) / (1920 - 300))); }
.layout-block.grid, .layout-shadow.grid, .layout-grid.grid { gap: 0; }
.layout-block .col .image img { width: 100%; height: auto; }
.flex { display: flex !important; flex-wrap: wrap; }
ul.grid, ul.flex { list-style-type: none; padding: 0; margin: 0; }
.flex.flex-direction--row { flex-direction: row; }
.flex.flex-direction--column { flex-direction: column; }
.flex.flex-direction--row-reverse { flex-direction: row-reverse; }
.flex.flex-direction--column-reverse { flex-direction: column-reverse; }
@media all and ( min-width: 1200px ) {
	.grid.grid-reverse { direction: rtl; }
	.grid.grid-reverse * { direction: ltr; }
}
.justify-content--start { justify-content: start; }
.flex.justify-content--start { justify-content: flex-start; }
.justify-content--center { justify-content: center; }
.justify-content--end { justify-content: end; }
.flex.justify-content--end { justify-content: flex-end; }
.justify-content--space { justify-content: space-between; }
.align-items--stretch { align-items: stretch; }
.align-items--center { align-items: center; }
.align-items--start { align-items: start; }
.align-items--end { align-items: end; }
.align-content--start { align-content: start; }
.flex.align-content--start { align-content: flex-start; }
.align-content--center { align-content: center; }
.align-content--end { align-content: end; }
.flex.align-content--end { align-content: flex-end; }
.align-content--space { align-content: space-between; }
.row { width: 100%; float: left; }
.row .col .content { flex: 1; }
.row .col.justify-content--space .content { flex: none; }
.row .col .content .text { flex: 1; }
[class*="columns-1"].flex > * { width: 100%; }
[class*="columns-2"].flex > * { width: 100%; }
[class*="columns-3"].flex > * { width: 100%; }
[class*="columns-4"].flex > * { width: 100%; }
.grid .col { width: 100%; }
[class*="columns-1"].grid { grid-template-columns: repeat(1, 1fr); }
[class*="columns-1"].grid.left { grid-template-columns: 100%; justify-content: start; }
[class*="columns-1"].grid.right { grid-template-columns: 100%; justify-content: end; }
[class*="columns-1"].grid.center { grid-template-columns: 100%; justify-content: center; }
[class*="columns-2"].grid { grid-template-columns: repeat(1, 1fr); }
[class*="columns-2"].grid.left { grid-template-columns: repeat(1, 1fr); }
[class*="columns-2"].grid.right { grid-template-columns: repeat(1, 1fr); }
[class*="columns-3"].grid { grid-template-columns: repeat(1, 1fr); }
[class*="columns-4"].grid { grid-template-columns: repeat(1, 1fr); }
@media all and ( min-width: 600px ) {
	[class*="columns-2"].flex > * { width: calc(50% - 18px); }
	[class*="columns-2"].grid { grid-template-columns: repeat(2, 1fr); }
	[class*="columns-2"].grid.left { grid-template-columns: 2fr 1fr; }
	[class*="columns-2"].grid.right { grid-template-columns: 1fr 2fr; }
}
@media all and ( min-width: 900px ) {
	[class*="columns-1"].flex.left { justify-content: start; }
	[class*="columns-1"].flex.right { justify-content: end; }
	[class*="columns-1"].flex.center { justify-content: space-around; }
	[class*="columns-1"].flex.left > *, [class*="columns-1"].flex.right > * { width: 50%; }
	[class*="columns-1"].flex.center > * { width: 75%; }
	[class*="columns-2"].flex > * { width: calc(50% - 18px); }
	.layout-block [class*="columns-2"].flex > * { width: 50%; }
	[class*="columns-3"].flex > * { width: calc(50% - 18px); }
	[class*="columns-4"].flex > * { width: calc(50% - 18px); }	
	[class*="columns-1"].grid.left { grid-template-columns: 50%; justify-content: start; }
	[class*="columns-1"].grid.right { grid-template-columns: 50%; justify-content: end; }
	[class*="columns-1"].grid.center { grid-template-columns: 75%; justify-content: center; }
	[class*="columns-2"].grid { grid-template-columns: repeat(2, 1fr); }
	[class*="columns-2"].grid.left { grid-template-columns: 3fr 1fr; }
	[class*="columns-2"].grid.right { grid-template-columns: 1fr 3fr; }
	[class*="columns-3"].grid { grid-template-columns: repeat(3, 1fr); }
	[class*="columns-4"].grid { grid-template-columns: repeat(2, 1fr); }	
}
@media all and ( min-width: 1200px ) {
	[class*="columns-3"].flex > * { width: calc(33.33% - 18px); }
	[class*="columns-4"].flex > * { width: calc((100% / 4) - 18px); }	
	[class*="columns-3"].grid { grid-template-columns: repeat(3, 1fr); }
	[class*="columns-4"].grid { grid-template-columns: repeat(4, 1fr); }	
	.layout-block .text { padding: 30px; }
}