:root {
    --c-blue: #2e04f5;

    --size-xxs: .25rem;
    --size-xs: .5rem;
    --size-s: .75rem;
    --size-ss: 1rem;
    --size-d: 1.5rem;
    --size-m: 3rem;
    --size-l: 4.5rem;
    --size-xl: 6rem;
    --size-xxl: 12rem;

    --header-m: 4.25rem;

    --alpha: .25;
}



.button {
    padding: .6rem 1rem .61rem;
    border: 1px solid white;
    border-radius: 2rem;
    width: fit-content;
    height: fit-content;
    transition: 200ms ease-in-out;
}
.button.--straight {border-radius: 0;}

.button.--active {
    background: white;
    color: black;
}
.button.--straight.--active {
    background: var(--c-blue);
    border: 1px solid var(--c-blue);
    color: white;
}

@media (hover: hover) {
    .button:hover {
        background: white !important;
        border: 1px solid white !important;
        color: black !important;
    }

    .button.--straight:hover {
        background: var(--c-blue);
        border: 1px solid var(--c-blue);
        color: white;
    }
}

.cta-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--size-d);
    column-gap: var(--size-xs);
    row-gap: var(--size-xs);
}

/* 
ELEMENTS
*/
.bg-black {background: 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;}




/* 
MEASURMENTS
*/
.pad-s {padding: .75rem;}

.pad,
.pad-section {padding: 1rem;}

.pad-page_top {padding-top: calc(var(--header-m) + 1rem);}
.pad-page {padding: calc(var(--header-m) + 2rem) 1rem 1rem;}

.mar-t {margin-top: 1rem;}
.mar-b {margin-bottom: 1rem;}

@media only screen and (min-width: 768px) {
    .pad-section {padding: 1.5rem;}
    .pad-page {padding: calc(var(--header-m) + 2rem) 1.5rem 1.5rem;}
}
@media only screen and (min-width: 1096px) {
    .pad-section {padding: 1.5rem 4.5rem;}
    .pad-page {padding: calc(var(--header-m) + 2rem) 4.5rem 1.5rem;}
}



/* 
DISPLAY
*/
.inline {display: inline;}
.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-m,
.hide-m_t,
.hide-m_d {display: none;}

.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) {
    .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: 1096px) {
    .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: 2048px) {
    .block-xd {display: block;}
    .flex-xd {display: flex;}
    .grid-xd {display: grid;}
}




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