:root {
    --c-light: #EDEDED;
    --c-gray: #a8a8a8;

    --header-m: 2.7rem;
    --h_atlas-m: 8.5rem;
    --h_atlas-table: 11rem;
    
    --header-t: 2.75rem;
    
    --header-d: 2.75rem;
    --h_atlas-d: 8.25rem;
    --h_atlas-table_d: 10.55rem;
}




/* 
ELEMENTS
*/
.button {
    display: flex !important;
    width: max-content;
    height: fit-content;
    line-height: 80%;
    padding: 4px 4px 3px;
    border-radius: 1px;
    transition: 200ms ease-in-out;
}
.button.--active {background: var(--c-light);}
@media (hover: hover) {
    .button:not(.--trans):hover {background: var(--c-light);}
}




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

.c-light {color: var(--c-light) !important;}
.c-gray {color: var(--c-gray) !important;}
.c-black {color: black;}

.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;
}

.media-alpha {opacity: .9;}




/* 
MEASURMENTS
*/
.pad {padding: 1rem;}
.pad-h {
    padding-right: 1rem;
    padding-left: 1rem;
}
.pad-h_m {
    padding-right: 2rem;
    padding-left: 2rem;
}
.pad-h_l {
    padding-right: 4rem;
    padding-left: 4rem;
}
.pad-page {padding-top: var(--header-m);}
.pad-page--full {padding: var(--header-m) 1rem 1rem;}
@media only screen and (min-width: 768px) {
    .pad-page {padding-top: var(--header-t);}
    .pad-page--full {padding: var(--header-t) 1rem 1rem;}
}
@media only screen and (min-width: 1024px) {
    .pad-page {padding-top: var(--header-d);}
    .pad-page--full {padding: var(--header-d) 1rem 1rem;}
}
.pad-b {padding-bottom: 1rem;}

.mar-t_s {margin-top: .5rem;}
.mar-t {margin-top: 1rem;}
.mar-t_m {margin-top: 2rem;}
.mar-t_l {margin-top: 4rem;}
.mar-t_xxl {margin-top: 8rem;}

.mar-t_em {margin-top: 1em;}
.mar-t_em_m {margin-top: 2em;}
.mar-page {margin-top: var(--header-m);}
.mar-page--full {margin: var(--header-m) 1rem 1rem;}
@media only screen and (min-width: 768px) {
    .mar-page {margin-top: var(--header-t);}
    .mar-page--full {margin: var(--header-t) 1rem 1rem;}
}
@media only screen and (min-width: 1024px) {
    .mar-page {margin-top: var(--header-d);}
    .mar-page--full {margin: var(--header-d) 1rem 1rem;}
}

.mar-b_xxxs {margin-bottom: .1em;}
.mar-b_xxs {margin-bottom: 4px;}
.mar-b {margin-bottom: 1rem;}
.mar-b_em {margin-bottom: 1em;}
.mar-b_l {margin-bottom: 2rem;}




/* 
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
*/
.flex-m {display: flex !important;}

.hide {display: none !important;}
.hide-m,
.hide-m_t,
.hide-m_d {display: none !important;}

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

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

@media only screen and (min-width: 768px) {
    .hide-t,
    .hide-t_d {display: none;}

    .block-t,
    .block-t_d {display: block !important;}

    .flex-t,
    .flex-t_d {display: flex !important;}

    .grid-t,
    .grid-t_d {display: grid !important;}
}

@media only screen and (min-width: 1024px) {
    .hide-d,
    .hide-m_d {display: none !important;}

    .block-d {display: block !important;}
    .flex-d {display: flex !important;}
    .grid-d {display: grid !important;}
}

@media only screen and (min-width: 2048px) {
    .block-xd {display: block !important;}
    .flex-xd {display: flex !important;}
    .grid-xd {display: grid !important;}
}


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