:root {
    --size-s: .5rem;
    --size-sx: .75rem;
    --size: 1rem;
    --size-x: 1.5rem;
    --size-m: 2rem;
    --size-l: 4rem;
    --size-xl: 8rem;
    --size-xlx: 12rem;
    --size-xxl: 16rem;
    
    --c-gray: #6C6C6C;
    --c-light: #B2B2B2;
    --c-trans: rgba(255,255,255,.85);
    --c-office: #FF69A9;
    --c-observatory: #303880;
}


/* 
ELEMENTS
*/
.bg-white {background: white;}
.bg-light {background: var(--c-light);}

.fill-gray,
.fill-gray * {fill: var(--c-gray);}

.c-gray {color: var(--c-gray);}
.c-light {color: var(--c-light);}
.c-white {color: white;}

.alpha {opacity: .85;}

.ratio-9_16 {aspect-ratio: 9/16;}
.ratio-2_3 {aspect-ratio: 2/3;}
.ratio-4_5 {aspect-ratio: 4/5;}
.ratio-1_1 {aspect-ratio: 1/1;}
.ratio-5_4 {aspect-ratio: 5/4;}
.ratio-3_2 {aspect-ratio: 3/2;}
.ratio-16_9 {aspect-ratio: 16/9;}

.media-cover {width: 100%; height: 100%; object-fit: cover;}
.media-contain {width: 100%; height: 100%; object-fit: contain;}


/* 
MEASURMENTS
*/
.pad {padding: var(--size);}
.pad-h {padding: 0 var(--size);}

.mar-t {margin-top: var(--size);}
.mar-b {margin-bottom: var(--size);}
.mar-h {margin: 0 var(--size);}
.mar-page {margin-top: var(--size-xlx);}
@media only screen and (min-width: 768px) {
    .mar-page {margin-top: var(--size-xxl);}
}

/* 
DISPLAY
*/
.block {display: block;}

.flex {display: flex;}
.f-wrap {flex-wrap: wrap;}
.f-nowrap {flex-wrap: nowrap;}
.f-column {flex-direction: column;}

.j-center {justify-content: center;}
.j-end {justify-content: end;}
.j-between {justify-content: space-between;}
.j-around {justify-content: space-around;}
.j-evenly {justify-content: space-evenly;}

.a-start {align-items: start;}
.a-center {align-items: center;}
.a-end {align-items: end;}


/* 
POSITION
*/
.p-fixed {position: fixed;}
.p-sticky {position: sticky;}
.p-relative {position: relative;}
.p-absolute {position: absolute;}

.p-all {top: 0; right: 0; bottom: 0; left: 0;}


/* 
STATUS
*/
.hide {display: none !important;}

.hide-scrollbar::-webkit-scrollbar {display: none;}
.hide-scrollbar {-ms-overflow-style: none; scrollbar-width: none;}

.v-hide {visibility: hidden;}
.stop {overflow: hidden;}

@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 1096px) {}
@media only screen and (min-width: 2048px) {}
@media (hover: hover) {}