:root {
	--gutter: 50px;
	--container: 1200px;
	--round: 10px;
	--n: 0;
	--xxs: 0.2;
	--xs: 0.4;
	--h: 0.5;
	--s: 0.6;
	--m: 0.8;
	--d: 1;
	--l: 1.5;
	--xl: 2;
	--xxl: 2.5;
}

.flex-container {
	display: flex;
  flex-direction: row;
}

.flex-elements-container > * {
  flex: 1;
}

.flex-direction--column {
  flex-direction: column;
}

.flex-direction--row {
  flex-direction: column;
}

.flex--d {
	flex: 1;
}

.flex--2x {
	flex: 2;
}

.flex--3x {
	flex: 3;
}

.flex--4x {
	flex: 4;
}

.flex--5x {
	flex: 5;
}

.flex--6x {
	flex: 6;
}

.flex--7x {
	flex: 7;
}

.flex--8x {
	flex: 8;
}

.flex--9x {
	flex: 9;
}

.flex--10x {
	flex: 10;
}

.flex--11x {
	flex: 11;
}

.grid {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
}

.grid--1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid--6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid--7 {
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid--8 {
	grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid--9 {
	grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid--10 {
	grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid--11 {
	grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid--12 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gap--xxs {
	gap: calc(var(--gutter) * var(--xxs));
}

.gap--xs {
	gap: calc(var(--gutter) * var(--xs));
}

.gap--h {
	gap: calc(var(--gutter) * var(--h));
}

.gap--s {
	gap: calc(var(--gutter) * var(--s));
}

.gap--m {
	gap: calc(var(--gutter) * var(--m));
}

.gap--d {
	gap: calc(var(--gutter) * var(--d));
}

.gap--l {
	gap: calc(var(--gutter) * var(--l));
}

.gap--xl {
	gap: calc(var(--gutter) * var(--xl));
}

.gap--xxl {
	gap: calc(var(--gutter) * var(--xxl));
}

.gap--2x {
	gap: calc(var(--gutter) * 2);
}

.gap--3x {
	gap: calc(var(--gutter) * 3);
}

.gap--4x {
	gap: calc(var(--gutter) * 4);
}

.gap--5x {
	gap: calc(var(--gutter) * 5);
}

.width--xxs {
	width: calc(var(--container) * var(--xxs));
}

.width--xs {
	width: calc(var(--container) * var(--xs));
}

.width--h {
	width: calc(var(--container) * var(--h));
}

.width--s {
	width: calc(var(--container) * var(--s));
}

.width--m {
	width: calc(var(--container) * var(--m));
}

.width--d {
	width: calc(var(--container) * var(--d));
}

.width--l {
	width: calc(var(--container) * var(--l));
}

.width--xl {
	width: calc(var(--container) * var(--xl));
}

.width--xxl {
	width: calc(var(--container) * var(--xxl));
}

.height--xxs {
	height: calc(100% * var(--xxs));
}

.height--xs {
	height: calc(100% * var(--xs));
}

.height--h {
	height: calc(100% * var(--h));
}

.height--s {
	height: calc(100% * var(--s));
}

.height--m {
	height: calc(100% * var(--m));
}

.height--d {
	height: calc(100% * var(--d));
}

.height--l {
	height: calc(100% * var(--l));
}

.height--xl {
	height: calc(100% * var(--xl));
}

.height--xxl {
	height: calc(100% * var(--xxl));
}

.vwidth--xxs {
	width: calc(100vw * var(--xxs));
}

.vwidth--xs {
	width: calc(100vw * var(--xs));
}

.vwidth--h {
	width: calc(100vw * var(--h));
}

.vwidth--s {
	width: calc(100vw * var(--s));
}

.vwidth--m {
	width: calc(100vw * var(--m));
}

.vwidth--d {
	width: calc(100vw * var(--d));
}

.vwidth--l {
	width: calc(100vw * var(--l));
}

.vwidth--xl {
	width: calc(100vw * var(--xl));
}

.vwidth--xxl {
	width: calc(100vw * var(--xxl));
}

.vheight--xxs {
	height: calc(100vh * var(--xxs));
}

.vheight--xs {
	height: calc(100vh * var(--xs));
}

.vheight--h {
	height: calc(100vh * var(--h));
}

.vheight--s {
	height: calc(100vh * var(--s));
}

.vheight--m {
	height: calc(100vh * var(--m));
}

.vheight--d {
	height: calc(100vh * var(--d));
}

.vheight--l {
	height: calc(100vh * var(--l));
}

.vheight--xl {
	height: calc(100vh * var(--xl));
}

.vheight--xxl {
	height: calc(100vh * var(--xxl));
}

.rounded--xxs {
	border-radius: calc(var(--round) * var(--xxs));
}

.rounded--xs {
	border-radius: calc(var(--round) * var(--xs));
}

.rounded--h {
	border-radius: calc(var(--round) * var(--h));
}

.rounded--s {
	border-radius: calc(var(--round) * var(--s));
}

.rounded--d {
	border-radius: calc(var(--round) * var(--d));
}

.rounded--m {
	border-radius: calc(var(--round) * var(--m));
}

.rounded--l {
	border-radius: calc(var(--round) * var(--l));
}

.rounded--xl {
	border-radius: calc(var(--round) * var(--xl));
}

.rounded--xxl {
	border-radius: calc(var(--round) * var(--xxl));
}

.round {
	border-radius: 100%;
}

.padding--xxs {
	padding: calc(var(--gutter) * var(--xxs));
}

.padding--xs {
	padding: calc(var(--gutter) * var(--xs));
}

.padding--h {
	padding: calc(var(--gutter) * var(--h));
}

.padding--s {
	padding: calc(var(--gutter) * var(--s));
}

.padding--m {
	padding: calc(var(--gutter) * var(--m));
}

.padding--d {
	padding: calc(var(--gutter) * var(--d));
}

.padding--l {
	padding: calc(var(--gutter) * var(--l));
}

.padding--xl {
	padding: calc(var(--gutter) * var(--xl));
}

.padding--xxl {
	padding: calc(var(--gutter) * var(--xxl));
}

.padding--2x {
	padding: calc(var(--gutter) * 2);
}

.padding--3x {
	padding: calc(var(--gutter) * 3);
}

.padding--4x {
	padding: calc(var(--gutter) * 4);
}

.padding--5x {
	padding: calc(var(--gutter) * 5);
}

.padding-top--xxs {
	padding-top: calc(var(--gutter) * var(--xxs));
}

.padding-top--xs {
	padding-top: calc(var(--gutter) * var(--xs));
}

.padding-top--h {
	padding-top: calc(var(--gutter) * var(--h));
}

.padding-top--s {
	padding-top: calc(var(--gutter) * var(--s));
}

.padding-top--m {
	padding-top: calc(var(--gutter) * var(--m));
}

.padding-top--d {
	padding-top: calc(var(--gutter) * var(--d));
}

.padding-top--l {
	padding-top: calc(var(--gutter) * var(--l));
}

.padding-top--xl {
	padding-top: calc(var(--gutter) * var(--xl));
}

.padding-top--xxl {
	padding-top: calc(var(--gutter) * var(--xxl));
}

.padding-top--2x {
	padding-top: calc(var(--gutter) * 2);
}

.padding-top--3x {
	padding-top: calc(var(--gutter) * 3);
}

.padding-top--4x {
	padding-top: calc(var(--gutter) * 4);
}

.padding-top--5x {
	padding-top: calc(var(--gutter) * 5);
}

.padding-bottom--xxs {
	padding-bottom: calc(var(--gutter) * var(--xxs));
}

.padding-bottom--xs {
	padding-bottom: calc(var(--gutter) * var(--xs));
}

.padding-bottom--h {
	padding-bottom: calc(var(--gutter) * var(--h));
}

.padding-bottom--s {
	padding-bottom: calc(var(--gutter) * var(--s));
}

.padding-bottom--m {
	padding-bottom: calc(var(--gutter) * var(--m));
}

.padding-bottom--d {
	padding-bottom: calc(var(--gutter) * var(--d));
}

.padding-bottom--l {
	padding-bottom: calc(var(--gutter) * var(--l));
}

.padding-bottom--xl {
	padding-bottom: calc(var(--gutter) * var(--xl));
}

.padding-bottom--xxl {
	padding-bottom: calc(var(--gutter) * var(--xxl));
}

.padding-bottom--2x {
	padding-bottom: calc(var(--gutter) * 2);
}

.padding-bottom--3x {
	padding-bottom: calc(var(--gutter) * 3);
}

.padding-bottom--4x {
	padding-bottom: calc(var(--gutter) * 4);
}

.padding-bottom--5x {
	padding-bottom: calc(var(--gutter) * 5);
}

.padding-left--xxs {
	padding-left: calc(var(--gutter) * var(--xxs));
}

.padding-left--xs {
	padding-left: calc(var(--gutter) * var(--xs));
}

.padding-left--h {
	padding-left: calc(var(--gutter) * var(--h));
}

.padding-left--s {
	padding-left: calc(var(--gutter) * var(--s));
}

.padding-left--m {
	padding-left: calc(var(--gutter) * var(--m));
}

.padding-left--d {
	padding-left: calc(var(--gutter) * var(--d));
}

.padding-left--l {
	padding-left: calc(var(--gutter) * var(--l));
}

.padding-left--xl {
	padding-left: calc(var(--gutter) * var(--xl));
}

.padding-left--xxl {
	padding-left: calc(var(--gutter) * var(--xxl));
}

.padding-left--2x {
	padding-left: calc(var(--gutter) * var(--xl));
}

.padding-left--3x {
	padding-left: calc(var(--gutter) * 3);
}

.padding-left--4x {
	padding-left: calc(var(--gutter) * 4);
}

.padding-left--5x {
	padding-left: calc(var(--gutter) * 5);
}

.padding-right--xxs {
	padding-right: calc(var(--gutter) * var(--xxs));
}

.padding-right--xs {
	padding-right: calc(var(--gutter) * var(--xs));
}

.padding-right--h {
	padding-right: calc(var(--gutter) * var(--h));
}

.padding-right--s {
	padding-right: calc(var(--gutter) * var(--s));
}

.padding-right--m {
	padding-right: calc(var(--gutter) * var(--m));
}

.padding-right--d {
	padding-right: calc(var(--gutter) * var(--d));
}

.padding-right--l {
	padding-right: calc(var(--gutter) * var(--l));
}

.padding-right--xl {
	padding-right: calc(var(--gutter) * var(--xl));
}

.padding-right--xxl {
	padding-right: calc(var(--gutter) * var(--xxl));
}

.padding-right--2x {
	padding-right: calc(var(--gutter) * 2);
}

.padding-right--3x {
	padding-right: calc(var(--gutter) * 3);
}

.padding-right--4x {
	padding-right: calc(var(--gutter) * 4);
}

.padding-right--5x {
	padding-right: calc(var(--gutter) * 5);
}

.padding--none {
	padding: none;
}

.padding-top--none {
	padding-top: none;
}

.padding-right--none {
	padding-right: none;
}

.padding-bottom--none {
	padding-bottom: none;
}

.padding-left--none {
	padding-left: none;
}

.padding-vertical--none {
	padding-top: none;
	padding-bottom: none;
}

.padding-horizontal--none {
	padding-left: none;
	padding-right: none;
}

.margin--xxs {
	margin: calc(var(--gutter) * var(--xxs));
}

.margin--xs {
	margin: calc(var(--gutter) * var(--xs));
}

.margin--h {
	margin: calc(var(--gutter) * var(--h));
}

.margin--s {
	margin: calc(var(--gutter) * var(--s));
}

.margin--m {
	margin: calc(var(--gutter) * var(--m));
}

.margin--d {
	margin: calc(var(--gutter) * var(--d));
}

.margin--l {
	margin: calc(var(--gutter) * var(--l));
}

.margin--xl {
	margin: calc(var(--gutter) * var(--xl));
}

.margin--xxl {
	margin: calc(var(--gutter) * var(--xxl));
}

.margin--2x {
	margin: calc(var(--gutter) * 2);
}

.margin--3x {
	margin: calc(var(--gutter) * 3);
}

.margin--4x {
	margin: calc(var(--gutter) * 4);
}

.margin--5x {
	margin: calc(var(--gutter) * 5);
}

.margin-top--xxs {
	margin-top: calc(var(--gutter) * var(--xxs));
}

.margin-top--xs {
	margin-top: calc(var(--gutter) * var(--xs));
}

.margin-top--h {
	margin-top: calc(var(--gutter) * var(--h));
}

.margin-top--s {
	margin-top: calc(var(--gutter) * var(--s));
}

.margin-top--m {
	margin-top: calc(var(--gutter) * var(--m));
}

.margin-top--d {
	margin-top: calc(var(--gutter) * var(--d));
}

.margin-top--l {
	margin-top: calc(var(--gutter) * var(--l));
}

.margin-top--xl {
	margin-top: calc(var(--gutter) * var(--xl));
}

.margin-top--xxl {
	margin-top: calc(var(--gutter) * var(--xxl));
}

.margin-top--2x {
	margin-top: calc(var(--gutter) * 2);
}

.margin-top--3x {
	margin-top: calc(var(--gutter) * 3);
}

.margin-top--4x {
	margin-top: calc(var(--gutter) * 4);
}

.margin-top--5x {
	margin-top: calc(var(--gutter) * 5);
}

.margin-bottom--xxs {
	margin-bottom: calc(var(--gutter) * var(--xxs));
}

.margin-bottom--xs {
	margin-bottom: calc(var(--gutter) * var(--xs));
}

.margin-bottom--h {
	margin-bottom: calc(var(--gutter) * var(--h));
}

.margin-bottom--s {
	margin-bottom: calc(var(--gutter) * var(--s));
}

.margin-bottom--m {
	margin-bottom: calc(var(--gutter) * var(--m));
}

.margin-bottom--d {
	margin-bottom: calc(var(--gutter) * var(--d));
}

.margin-bottom--l {
	margin-bottom: calc(var(--gutter) * var(--l));
}

.margin-bottom--xl {
	margin-bottom: calc(var(--gutter) * var(--xl));
}

.margin-bottom--xxl {
	margin-bottom: calc(var(--gutter) * var(--xxl));
}

.margin-bottom--2x {
	margin-bottom: calc(var(--gutter) * 2);
}

.margin-bottom--3x {
	margin-bottom: calc(var(--gutter) * 3);
}

.margin-bottom--4x {
	margin-bottom: calc(var(--gutter) * 4);
}

.margin-bottom--5x {
	margin-bottom: calc(var(--gutter) * 5);
}

.margin-left--xxs {
	margin-left: calc(var(--gutter) * var(--xxs));
}

.margin-left--xs {
	margin-left: calc(var(--gutter) * var(--xs));
}

.margin-left--h {
	margin-left: calc(var(--gutter) * var(--h));
}

.margin-left--s {
	margin-left: calc(var(--gutter) * var(--s));
}

.margin-left--m {
	margin-left: calc(var(--gutter) * var(--m));
}

.margin-left--d {
	margin-left: calc(var(--gutter) * var(--d));
}

.margin-left--l {
	margin-left: calc(var(--gutter) * var(--l));
}

.margin-left--xl {
	margin-left: calc(var(--gutter) * var(--xl));
}

.margin-left--xxl {
	margin-left: calc(var(--gutter) * var(--xxl));
}

.margin-left--2x {
	margin-left: calc(var(--gutter) * 2);
}

.margin-left--3x {
	margin-left: calc(var(--gutter) * 3);
}

.margin-left--4x {
	margin-left: calc(var(--gutter) * 4);
}

.margin-left--5x {
	margin-left: calc(var(--gutter) * 5);
}

.margin-right--xxs {
	margin-right: calc(var(--gutter) * var(--xxs));
}

.margin-right--xs {
	margin-right: calc(var(--gutter) * var(--xs));
}

.margin-right--h {
	margin-right: calc(var(--gutter) * var(--h));
}

.margin-right--s {
	margin-right: calc(var(--gutter) * var(--s));
}

.margin-right--m {
	margin-right: calc(var(--gutter) * var(--m));
}

.margin-right--d {
	margin-right: calc(var(--gutter) * var(--d));
}

.margin-right--l {
	margin-right: calc(var(--gutter) * var(--l));
}

.margin-right--xl {
	margin-right: calc(var(--gutter) * var(--xl));
}

.margin-right--xxl {
	margin-right: calc(var(--gutter) * var(--xxl));
}

.margin-right--2x {
	margin-right: calc(var(--gutter) * 2);
}

.margin-right--3x {
	margin-right: calc(var(--gutter) * 3);
}

.margin-right--4x {
	margin-right: calc(var(--gutter) * 4);
}

.margin-right--5x {
	margin-right: calc(var(--gutter) * 5);
}


.padding-horizontal--xxs {
	padding-left: calc(var(--gutter) * var(--xxs));
	padding-right: calc(var(--gutter) * var(--xxs));
}

.padding-horizontal--xs {
	padding-left: calc(var(--gutter) * var(--xs));
	padding-right: calc(var(--gutter) * var(--xs));
}

.padding-horizontal--h {
	padding-left: calc(var(--gutter) * var(--h));
	padding-right: calc(var(--gutter) * var(--h));
}

.padding-horizontal--s {
	padding-left: calc(var(--gutter) * var(--s));
	padding-right: calc(var(--gutter) * var(--s));
}

.padding-horizontal--m {
	padding-left: calc(var(--gutter) * var(--m));
	padding-right: calc(var(--gutter) * var(--m));
}

.padding-horizontal--d {
	padding-left: calc(var(--gutter) * var(--d));
	padding-right: calc(var(--gutter) * var(--d));
}

.padding-horizontal--l {
	padding-left: calc(var(--gutter) * var(--l));
	padding-right: calc(var(--gutter) * var(--l));
}

.padding-horizontal--xl {
	padding-left: calc(var(--gutter) * var(--xl));
	padding-right: calc(var(--gutter) * var(--xl));
}

.padding-horizontal--xxl {
	padding-left: calc(var(--gutter) * var(--xxl));
	padding-right: calc(var(--gutter) * var(--xxl));
}

.padding-horizontal--2x {
	padding-left: calc(var(--gutter) * 2);
	padding-right: calc(var(--gutter) * 2);
}

.padding-horizontal--3x {
	padding-left: calc(var(--gutter) * 3);
	padding-right: calc(var(--gutter) * 3);
}

.padding-horizontal--4x {
	padding-left: calc(var(--gutter) * 4);
	padding-right: calc(var(--gutter) * 4);
}

.padding-horizontal--5x {
	padding-left: calc(var(--gutter) * 5);
	padding-right: calc(var(--gutter) * 5);
}

.padding-vertical--xxs {
	padding-top: calc(var(--gutter) * var(--xxs));
	padding-bottom: calc(var(--gutter) * var(--xxs));
}

.padding-vertical--xs {
	padding-top: calc(var(--gutter) * var(--xs));
	padding-bottom: calc(var(--gutter) * var(--xs));
}

.padding-vertical--h {
	padding-top: calc(var(--gutter) * var(--h));
	padding-bottom: calc(var(--gutter) * var(--h));
}

.padding-vertical--s {
	padding-top: calc(var(--gutter) * var(--s));
	padding-bottom: calc(var(--gutter) * var(--s));
}

.padding-vertical--m {
	padding-top: calc(var(--gutter) * var(--m));
	padding-bottom: calc(var(--gutter) * var(--m));
}

.padding-vertical--d {
	padding-top: calc(var(--gutter) * var(--d));
	padding-bottom: calc(var(--gutter) * var(--d));
}

.padding-vertical--l {
	padding-top: calc(var(--gutter) * var(--l));
	padding-bottom: calc(var(--gutter) * var(--l));
}

.padding-vertical--xl {
	padding-top: calc(var(--gutter) * var(--xl));
	padding-bottom: calc(var(--gutter) * var(--xl));
}

.padding-vertical--xxl {
	padding-top: calc(var(--gutter) * var(--xxl));
	padding-bottom: calc(var(--gutter) * var(--xxl));
}

.padding-vertical--2x {
	padding-top: calc(var(--gutter) * 2);
	padding-bottom: calc(var(--gutter) * 2);
}

.padding-vertical--3x {
	padding-top: calc(var(--gutter) * 3);
	padding-bottom: calc(var(--gutter) * 3);
}

.padding-vertical--4x {
	padding-top: calc(var(--gutter) * 4);
	padding-bottom: calc(var(--gutter) * 4);
}

.padding-vertical--5x {
	padding-top: calc(var(--gutter) * 5);
	padding-bottom: calc(var(--gutter) * 5);
}


.margin-horizontal--xxs {
	margin-left: calc(var(--gutter) * var(--xxs));
	margin-right: calc(var(--gutter) * var(--xxs));
}

.margin-horizontal--xs {
	margin-left: calc(var(--gutter) * var(--xs));
	margin-right: calc(var(--gutter) * var(--xs));
}

.margin-horizontal--h {
	margin-left: calc(var(--gutter) * var(--h));
	margin-right: calc(var(--gutter) * var(--h));
}

.margin-horizontal--s {
	margin-left: calc(var(--gutter) * var(--s));
	margin-right: calc(var(--gutter) * var(--s));
}

.margin-horizontal--m {
	margin-left: calc(var(--gutter) * var(--m));
	margin-right: calc(var(--gutter) * var(--m));
}

.margin-horizontal--d {
	margin-left: calc(var(--gutter) * var(--d));
	margin-right: calc(var(--gutter) * var(--d));
}

.margin-horizontal--l {
	margin-left: calc(var(--gutter) * var(--l));
	margin-right: calc(var(--gutter) * var(--l));
}

.margin-horizontal--xl {
	margin-left: calc(var(--gutter) * var(--xl));
	margin-right: calc(var(--gutter) * var(--xl));
}

.margin-horizontal--xxl {
	margin-left: calc(var(--gutter) * var(--xxl));
	margin-right: calc(var(--gutter) * var(--xxl));
}

.margin-horizontal--2x {
	margin-left: calc(var(--gutter) * 2);
	margin-right: calc(var(--gutter) * 2);
}

.margin-horizontal--3x {
	margin-left: calc(var(--gutter) * 3);
	margin-right: calc(var(--gutter) * 3);
}

.margin-horizontal--4x {
	margin-left: calc(var(--gutter) * 4);
	margin-right: calc(var(--gutter) * 4);
}

.margin-horizontal--5x {
	margin-left: calc(var(--gutter) * 5);
	margin-right: calc(var(--gutter) * 5);
}

.margin-vertical--xxs {
	margin-top: calc(var(--gutter) * var(--xxs));
	margin-bottom: calc(var(--gutter) * var(--xxs));
}

.margin-vertical--xs {
	margin-top: calc(var(--gutter) * var(--xs));
	margin-bottom: calc(var(--gutter) * var(--xs));
}

.margin-vertical--h {
	margin-top: calc(var(--gutter) * var(--h));
	margin-bottom: calc(var(--gutter) * var(--h));
}

.margin-vertical--s {
	margin-top: calc(var(--gutter) * var(--s));
	margin-bottom: calc(var(--gutter) * var(--s));
}

.margin-vertical--m {
	margin-top: calc(var(--gutter) * var(--m));
	margin-bottom: calc(var(--gutter) * var(--m));
}

.margin-vertical--d {
	margin-top: calc(var(--gutter) * var(--d));
	margin-bottom: calc(var(--gutter) * var(--d));
}

.margin-vertical--l {
	margin-top: calc(var(--gutter) * var(--l));
	margin-bottom: calc(var(--gutter) * var(--l));
}

.margin-vertical--xl {
	margin-top: calc(var(--gutter) * var(--xl));
	margin-bottom: calc(var(--gutter) * var(--xl));
}

.margin-vertical--xxl {
	margin-top: calc(var(--gutter) * var(--xxl));
	margin-bottom: calc(var(--gutter) * var(--xxl));
}

.margin-vertical--2x {
	margin-top: calc(var(--gutter) * 2);
	margin-bottom: calc(var(--gutter) * 2);
}

.margin-vertical--3x {
	margin-top: calc(var(--gutter) * 3);
	margin-bottom: calc(var(--gutter) * 3);
}

.margin-vertical--4x {
	margin-top: calc(var(--gutter) * 4);
	margin-bottom: calc(var(--gutter) * 4);
}

.margin-vertical--5x {
	margin-top: calc(var(--gutter) * 5);
	margin-bottom: calc(var(--gutter) * 5);
}

.margin--none {
	margin: none;
}

.margin-top--none {
	margin-top: none;
}

.margin-right--none {
	margin-right: none;
}

.margin-bottom--none {
	margin-bottom: none;
}

.margin-left--none {
	margin-left: none;
}

.margin-vertical--none {
	margin-top: none;
	margin-bottom: none;
}

.margin-horizontal--none {
	margin-left: none;
	margin-right: none;
}

.align-vertical--top {
	display: flex;
	align-items: flex-start;
}

.align-vertical--center {
	display: flex;
	align-items: center;
}

.align-vertical--bottom {
	display: flex;
	align-items: flex-end;
}

.align-horizontal--left {
	display: flex;
	align-items: flex-start;
}

.align-horizontal--center {
	display: flex;
	align-items: center;
}

.align-horizontal--right {
	display: flex;
	align-items: flex-end;
}

.align--center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mode--dark, 
.mode--dark * {
  color: #ffffff;
}

.opacity--100 {
  opacity: 1;
}

.opacity--90 {
  opacity: .9;
}

.opacity--80 {
  opacity: .8;
}

.opacity--70 {
  opacity: .7;
}

.opacity--60 {
  opacity: .6;
}

.opacity--50 {
  opacity: .5;
}

.opacity--40 {
  opacity: .4;
}

.opacity--30 {
  opacity: .3;
}

.opacity--20 {
  opacity: .2;
}

.opacity--10 {
  opacity: .1;
}

.text--left {
    text-align: left;
}

.text--center {
    text-align: center;
}

.text--right {
    text-align: right;
}

.text--justify {
    text-align: justify;
}

.text--nowrap {
    white-space: nowrap;
}

.text--uppercase {
    text-transform: uppercase;
}

.text--lowercase {
    text-transform: lowercase;
}

.text--capitalize {
    text-transform: capitalize;
}

.display--hidden {
  display: none !important;
}