:root {
    --c-clear: rgb(180, 180, 180)
}


/* 
STYLING
*/
.padding {padding: .25rem;}
.padding-h {padding: 0 .25rem;}

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

img.ratio-9_16,
img.ratio-2_3,
img.ratio-4_5,
img.ratio-1_1,
img.ratio-5_4,
img.ratio-3_2,
img.ratio-16_9,
video.ratio-9_16,
video.ratio-2_3,
video.ratio-4_5,
video.ratio-1_1,
video.ratio-5_4,
video.ratio-3_2,
video.ratio-16_9 {
    width: 100%;
    object-fit: cover;
}

.bg-blur {
    background: rgba(180, 180, 180, .25);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}
.bg-blur.--strong {background: rgba(180, 180, 180, .5);}
.bg-blur.--dark {background: rgba(0, 0, 0, .25);}


/* 
POSITION
*/
.flex {display: flex !important;}
.flex-column {flex-direction: column;}
.flex-wrap {flex-wrap: wrap;}
.flex-center {justify-content: center;}
.flex-space {justify-content: space-between;}

.p-fixed {position: fixed;}
.p-relative {position: relative;}
.p-absolute {position: absolute;}

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

/* 
STATUS
*/
.hide {display: none;}
.hide-scrollbar::-webkit-scrollbar {display: none;}
.hide-scrollbar {-ms-overflow-style: none;scrollbar-width: none;}
.stop {overflow: hidden;}


.hide-m {display: none !important;}
.hide-m_t {display: none !important;}
.hide-m_d {display: none !important;}
@media only screen and (min-width: 768px) {
    .hide-t {display: none !important;}
    .hide-t_d {display: none !important;}
    .hide-m {display: unset !important;}
    .hide-m_d {display: unset !important;}
}
@media only screen and (min-width: 1024px) {
    .hide-d {display: none !important;}
    .hide-m_d {display: none !important;}
    .hide-m_t {display: unset !important;}
    .hide-t {display: inherit !important;}
}
.stop {overflow: hidden;}


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