:root {
	--grid-gutter: var(--s-20);
	--grid-margin: var(--s-20);
	--grid-margin-negative: calc(0px - var(--s-20));
	--grid-columns: 12;
	/**/
	--color-black: #161618;
	--color-white: #F8F8FF;
	--rgb-black: 22, 22, 24;
	--rgb-white: 245, 245, 245;
	--color-grey-01: #DBDBE2;
	--color-grey-02: #BFBFC5;
	--color-grey-03: #A4A4A9;
	--color-grey-04: #8A8A8F;
	--color-grey-05: #707074;
	--color-grey-06: #58585B;
	--color-grey-07: #404144;
	--color-grey-08: #2A2A2D;
	--color-yellow-01: #F4E966;
	--color-yellow-02: #F8F2A3;
	--color-pink-01: #FF8C91;
	--color-pink-02: #FFA3A7;
	--color-blue-01: #98D4E9;
	--color-blue-02: #C1E5F2;
	--color-brown-01: #CCA678;
	--color-brown-02: #E1C7A9;
	--color-green-01: #5ADAC1;
	--color-green-02: #83EDD8;
	--color-error: #BE1515;
	--color-success: #01B955;
	/**/
	--color-text-01: #161618;
	--color-text-02: #F8F8FF;
	--color-text-03: #A4A4A9;
	/**/
	--letter-spacing: -0.032em;
	--image-radius: var(--s-06);
	--background-overlay: rgba(248, 248, 248, 0.8);
	--transition-handle: cubic-bezier(0.45, 0.1, 0, 1);
	--link-handle: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--filter-blur: blur(5rem);
	--header-height: 0;
	--rail-duration: 60s;
	/**/
	--s-180: 12.5vw;
	--s-160: 11.111vw;
	--s-144: 10vw;
	--s-120: 8.333vw;
	--s-112: 7.778vw;
	--s-104: 7.222vw;
	--s-96: 6.667vw;
	--s-92: 6.389vw;
	--s-80: 5.556vw;
	--s-72: 5vw;
	--s-64: 4.444vw;
	--s-56: 3.889vw;
	--s-48: 3.333vw;
	--s-40: 2.778vw;
	--s-32: 2.222vw;
	--s-30: 2.083vw;
	--s-28: 1.944vw;
	--s-24: 1.667vw;
	--s-26: 1.806vw;
	--s-22: 1.528vw;
	--s-20: 1.389vw;
	--s-18: 1.25vw;
	--s-17: 1.181vw;
	--s-16: 1.111vw;
	--s-15: 1.042vw;
	--s-14: 0.972vw;
	--s-13: 0.903vw;
	--s-12: 0.833vw;
	--s-10: 0.694vw;
	--s-09: 0.625vw;
	--s-08: 0.556vw;
	--s-07: 0.486vw;
	--s-06: 0.417vw;
	--s-05: 0.347vw;
	--s-04: 0.278vw;
	--s-03: 0.208vw;
	--s-02: 0.139vw;
}

::selection {
	background: var(--color-black);
	color: var(--color-white);
}

@media (max-width: 980px) and (min-width: 681px) and (orientation: portrait) {
	
	:root {
		--grid-gutter: var(--s-20);
		--grid-margin: var(--s-20);
		--grid-margin-negative: calc(0px - var(--s-20));
		--grid-columns: 8;
		/**/
		--s-180: 21.951vw;
		--s-160: 19.512vw;
		--s-144: 17.561vw;
		--s-120: 14.634vw;
		--s-112: 13.659vw;
		--s-104: 12.683vw;
		--s-96: 11.707vw;
		--s-92: 11.220vw;
		--s-80: 9.756vw;
		--s-72: 8.780vw;
		--s-64: 7.805vw;
		--s-56: 6.829vw;
		--s-48: 5.854vw;
		--s-40: 4.878vw;
		--s-32: 3.902vw;
		--s-30: 3.659vw;
		--s-28: 3.415vw;
		--s-26: 3.171vw;
		--s-24: 2.927vw;
		--s-22: 2.683vw;
		--s-20: 2.439vw;
		--s-18: 2.195vw;
		--s-17: 2.073vw;
		--s-16: 1.951vw;
		--s-15: 1.829vw;
		--s-14: 1.707vw;
		--s-12: 1.463vw;
		--s-10: 1.220vw;
		--s-09: 1.098vw;
		--s-08: 0.976vw;
		--s-07: 0.854vw;
		--s-06: 0.732vw;
		--s-05: 0.61vw;
		--s-04: 0.488vw;
		--s-03: 0.366vw;
		--s-02: 0.244vw;
	}
	
}

@media (max-width: 680px) {
	
	:root {
		--grid-gutter: var(--s-16);
		--grid-margin: var(--s-16);
		--grid-margin-negative: calc(0px - var(--s-16));
		--grid-columns: 4;
		/**/
		--s-180: 45.802vw;
		--s-160: 40.712vw;
		--s-144: 36.641vw;
		--s-120: 30.534vw;
		--s-112: 28.499vw;
		--s-104: 26.463vw;
		--s-96: 24.427vw;
		--s-92: 23.41vw;
		--s-80: 20.356vw;
		--s-72: 18.321vw;
		--s-64: 16.285vw;
		--s-56: 14.249vw;
		--s-48: 12.214vw;
		--s-40: 10.178vw;
		--s-32: 8.142vw;
		--s-30: 7.634vw;
		--s-28: 7.125vw;
		--s-26: 6.616vw;
		--s-24: 6.107vw;
		--s-22: 5.598vw;
		--s-20: 5.089vw;
		--s-18: 4.58vw;
		--s-17: 4.326vw;
		--s-16: 4.071vw;
		--s-15: 3.562vw;
		--s-14: 3.562vw;
		--s-12: 3.053vw;
		--s-10: 2.545vw;
		--s-09: 2.29vw;
		--s-08: 2.036vw;
		--s-07: 1.781vw;
		--s-06: 1.527vw;
		--s-05: 1.272vw;
		--s-04: 1.018vw;
		--s-03: 0.763vw;
		--s-02: 0.509vw;
	}
	
}

/**/

.the__grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	grid-column-gap: var(--grid-gutter);
	height: 100%;
	pointer-events: none;
	position: fixed;
	top: 0;
	z-index: 1000;
	left: var(--grid-margin);
	width: calc(100% - calc(var(--grid-margin) * 2));
}

.the__grid .the__grid__column {
	position: relative;
}

.the__grid--inner {
	background: red;
	opacity: 0.2;
	height: 100%;
	width: 100%;
}