:root {
    /* --c-black: black; */
}

/* 
TEXT
*/
.article p:not(:last-of-type) {margin-bottom: 1em;}

/* 
FLEX
*/
.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-center {align-items: center;}
.a-end {align-items: end;}


/* 
PADDING AND MARGIN
*/
.padding {padding: 1rem;}
.padding-t {padding-top: 1rem;}
.padding-t_s {padding-top: 1.5rem;}

.margin {margin: 1rem;}
.margin-b {margin-bottom: 1rem;}
.margin-b_s {margin-bottom: 2rem;}
.margin-b_med {margin-bottom: 4rem;}
.margin-b_xl {margin-bottom: 6rem;}
.margin-b_xxl {margin-bottom: 8rem;}
@media only screen and (min-width: 768px) {
    .margin-b_xxl {margin-bottom: 12rem;}
}

/* 
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;}
.v-hide {visibility: hidden;}
.stop {overflow: hidden;}

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

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

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

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

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

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

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


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