/*** GRID SYSTEM ***/

:root {
	--un-sm: 10px;
	--un-sm-n: -10px;
	--un: 20px;
	--un-n: -20px;
	--un-lg: 40px;
	--un-lg-n: -40px;
	--un-xl: 80px;
	--un-xl-n: -80px;
	--un-xxl: 120px;
	--un-xxl-n: -120px;
}

.grid {
	display: flex;
	flex-wrap: wrap;
	margin: var(--un-sm-n);
	justify-content: center;
}

.g-nomargin {margin: 0 var(--un-n);}
.g-nomargin:first-child {margin-top: var(--un);}
.g-nomargin:last-child {margin-bottom: var(--un);}

.g-nomargin:nth-child(even) {flex-direction:row-reverse;}
.grid-content {background-color:#533868;color:#fff;}
/* .g-nomargin:nth-child(even) .grid-content {background-color:#FFF;} */

.nomargin {margin:0 !important;}

.grid.centered {align-items: center;}

.grid-item {margin: var(--un-sm);}

.grid.g-2 .grid-item {width: calc(50% - var(--un));}

.grid.g-2.g-img .grid-item.gi-img {width: calc(33.33% - var(--un));}

.grid.g-2.g-img .grid-item.gi-img:first-child {padding-right: var(--un-lg);}

.grid.g-2.g-img .grid-item.gi-img:last-child {padding-left: var(--un-lg);}

.grid.g-2.g-img .grid-item:not(.gi-img) {width: calc(66.66% - var(--un));}

.grid.g-3 .grid-item {width: calc(33.33% - var(--un));}

.grid.g-4 .grid-item {width: calc(25% - var(--un));}

.grid.g-5 .grid-item {width: calc(20% - var(--un));}

@media (max-width: 1200px) {
	.grid.g-4 .grid-item {width: calc(50% - var(--un));}
}

@media (max-width: 992px) {
	.grid.g-2 .grid-item {width: calc(100% - var(--un));}
	.grid.g-3 .grid-item {width: calc(50% - var(--un));}
	.grid.g-5 .grid-item {width: calc(33.33% - var(--un));}
}

@media (max-width: 600px) {
	.grid.g-2 .grid-item {width: calc(100% - var(--un));}
	.grid.g-2.g-img .grid-item.gi-img {width: calc(100% - var(--un));}
	.grid.g-2.g-img .grid-item:not(.gi-img) {width: calc(100% - var(--un));}
	.grid.g-2.g-img .grid-item.gi-img {padding-left: 0 !important; padding-right: 0 !important; padding-bottom: var(--un);}
	.grid.g-3 .grid-item {width: calc(100% - var(--un));}
	.grid.g-4 .grid-item {width: calc(100% - var(--un));}
	.grid.g-5 .grid-item {width: calc(50% - var(--un));}	
}

@media (max-width: 400px) {
	.grid.g-5 .grid-item {width: calc(100% - var(--un));}	
}