:root {
    --primaryColor: #b0b5b4;
    --secondaryColor: #f0f0f0;
    --trecearyColor: #201e1c;

    --columnMobile: calc(calc(100vw - 84px) / 5 );
    --columnDesktop: calc(calc(100vw - 238px) / 16 );
}

/* 
    Colors (c)
*/
.c-primary {
    color: var(--primaryColor);
}

.c-secondary {
    color: var(--secondaryColor);
}

.c-darkgray {
    color: rgb(163, 163, 163);
}

.c-white {
    color: whitesmoke;
}

.c-gray {
    color: rgb(163, 163, 163);
}

.c-lightgray {
    color: rgb(163, 163, 163);
}

/* 
    Elements
*/
a.button {
    display: flex;
    width: fit-content;
    padding: .5rem .7rem;
    border: 2px solid black;
}

a.b-invert {
    border: 2px solid #f0f0f0;
}

/* 
    Display 
*/

.inline {
    display: inline;
}

.block {
    display: block;
}

.hide {
    display: none;
}

.flex {
    display: flex
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

/* 
    Padding 
*/
.pad-xxs {
    padding: 1rem 0;
}

.pad-xs {
    padding: 1rem 14px;
}

.pad-s,
.pad-m {
    padding: 1.5rem 14px 6rem;
}

.pad-l {
    padding: 48px 14px;
}

.pad-xl {
    padding: 8rem 14px;
}

/* Desktop Media Query */
@media screen and (min-width: 52rem) {
    .pad-s {
        padding: 2.5rem 14px 8rem;
    }

    .pad-m {
        padding: 5rem 14px 12rem;
    }

    .pad-xl {
        padding: 12.5rem 14px;
    }
}
/* 
    Margins 
*/

.mar-xs {
    margin: 1rem 0 2rem;
}

.mar-s {
    margin: 1.5rem 0;
}

.mar-m {
    margin: 2rem 0;
}

.mar-l {
    margin: 4rem 0 5rem;
}

.mar-xl {
    margin: 3rem 0;
}

.mar-top-xs {
    margin-top: 0.75rem;
}

.mar-top-s {
    margin-top: 1rem;
}

/* Desktop Media Query */
@media screen and (min-width: 52rem) {
    .mar-l {
        margin: 3rem 0;
    }
}

/* 
    Utilities 
*/

.no-scroll {
    overflow: hidden;
}


/* 
    Animations 
*/

.fade-in {
    animation: fade-in 250ms both;
}

@keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1}
}