:root {
	--grid-gap: 1.111vw;
	--grid-margin: min(var(--s-28), 2.5rem);
	--grid-height-margin: min(var(--s-24), 2rem);
	--grid-columns: 16;
	/**/
	--color-black: #08090D;
	--color-white: #FFFFFF;
	--color-text-01: #DDDCD3;
	--color-text-02: #08090D;
	--color-text-03: #6b6162;
	--color-grey-01: #EDF0EB;
	--color-grey-02: #E3E6E3;
	--color-grey-03: #DDDCD3;
	--color-red: #571313;
	--color-green: #197653;
	/**/
	--image-radius-big: var(--s-12);
	--image-radius-small: var(--s-10);
	--background-overlay: rgba(248, 248, 248, 0.8);
	--transition-handle: cubic-bezier(0.22, 0.61, 0.36, 1);
	--page-in-handle: cubic-bezier(0.04, 0.64, 0.17, 1);
	--link-handle: cubic-bezier(0.1, 0.77, 0.36, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--filter-blur: blur(5rem);
	/**/
	--s-180: 12.5vw;
	--s-160: 11.111vw;
	--s-120: 8.333vw;
	--s-112: 7.778vw;
	--s-104: 7.222vw;
	--s-96: 6.667vw;
	--s-92: 6.389vw;
	--s-88: 6.111vw;
	--s-80: 5.556vw;
	--s-72: 5vw;
	--s-64: 4.444vw;
	--s-56: 3.889vw;
	--s-52: 3.611vw;
	--s-48: 3.333vw;
	--s-40: 2.778vw;
	--s-36: 2.5vw;
	--s-32: 2.222vw;
	--s-28: 1.944vw;
	--s-24: 1.667vw;
	--s-22: 1.528vw;
	--s-21: 1.458vw;
	--s-20: 1.389vw;
	--s-18: 1.25vw;
	--s-16: 1.111vw;
	--s-14: 0.972vw;
	--s-12: 0.833vw;
	--s-10: 0.694vw;
	--s-09: 0.625vw;
	--s-08: 0.556vw;
	--s-06: 0.417vw;
	--s-04: 0.278vw;
	--s-03: 0.208vw;
	--s-02: 0.139vw;
}


@media (max-width: 980px) and (min-width: 681px) and (orientation: portrait) {
	
	:root {
		--grid-gap: 1.951vw;
		--grid-margin: 2.927vw;
		--grid-height-margin: 2.439vw;
		/**/
		--image-radius-big: var(--s-10);
		--image-radius-small: var(--s-08);
		/**/
		--s-180: 21.951vw;
		--s-160: 19.512vw;
		--s-120: 14.634vw;
		--s-112: 13.659vw;
		--s-104: 12.683vw;
		--s-96: 11.707vw;
		--s-92: 11.220vw;
		--s-88: 10.732vw;
		--s-80: 9.756vw;
		--s-72: 8.780vw;
		--s-64: 7.805vw;
		--s-56: 6.829vw;
		--s-52: 6.341vw;
		--s-48: 5.854vw;
		--s-40: 4.878vw;
		--s-36: 4.39vw;
		--s-32: 3.902vw;
		--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-16: 1.951vw;
		--s-14: 1.707vw;
		--s-12: 1.463vw;
		--s-10: 1.220vw;
		--s-09: 1.098vw;
		--s-08: 0.976vw;
		--s-06: 0.732vvw;
		--s-04: 0.488vw;
		--s-03: 0.366vw;
		--s-02: 0.244vw;
	}
	
}

@media (max-width: 980px) {
	
	:root {
		--grid-columns: 8;
	}
	
}

@media (max-width: 680px) {
	
	:root {
		--grid-gap: 4.615vw;
		--grid-margin: 4.615vw;
		--grid-height-margin: 4.103vw;
		/**/
		--image-radius-big: var(--s-08);
		--image-radius-small: var(--s-06);
		/**/
		--s-180: 46.154vw;
		--s-160: 41.026vw;
		--s-120: 30.769vw;
		--s-112: 28.718vw;
		--s-104: 26.667vw;
		--s-96: 26.667vw;
		--s-92: 23.590vw;
		--s-88: 22.564vw;
		--s-80: 20.513vw;
		--s-72: 18.462vw;
		--s-64: 16.410vw;
		--s-56: 14.359vw;
		--s-52: 13.333vw;
		--s-48: 12.308vw;
		--s-40: 10.256vw;
		--s-36: 9.231vw;
		--s-32: 8.205vw;
		--s-28: 7.179vw;
		--s-26: 6.667vw;
		--s-24: 6.154vw;
		--s-22: 5.641vw;
		--s-20: 5.128vw;
		--s-18: 4.615vw;
		--s-16: 4.103vw;
		--s-14: 3.590vw;
		--s-12: 3.077vw;
		--s-10: 2.564vw;
		--s-09: 2.308vw;
		--s-08: 2.051vw;
		--s-06: 1.538vw;
		--s-04: 1.026vw;
		--s-03: 0.769vw;
		--s-02: 0.513vw;
	}
	
}

/**/

.the__grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	grid-column-gap: var(--grid-gap);
	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 .grid__column {
	position: relative;
}

.the__grid .grid__inner {
	background: red;
	opacity: 0.2;
}