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

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

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

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

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

/* 
    Display 
*/

.inline {
    display: inline;
}

.block {
    display: block;
}

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

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

@media screen and (min-width: 52rem) {
    .grid {
        grid-template-columns: repeat(12, 1fr);
    }

}


/* 
    Padding 
*/

.pad-xs {
    padding: 16px;
}

.pad-s {
    padding: 20px;
}

.pad-m {
    padding: 32px;
}

.pad-l {
    padding: 48px;
}

.pad-xl {
    padding: 64px;
}

/* 
    Margins 
*/

.mar-xs {
    margin: 12px;
}

.mar-s {
    margin: 16px;
}

.mar-m {
    margin: 32px;
}

.mar-l {
    margin: 48px;
}

.mar-xl {
    margin: 64px;
}

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

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

/* 
    Utilities 
*/

.no-scroll {
    overflow: hidden;
}


/* 
    Animations 
*/

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

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