/* ============================= */
/* Flexbox Utilities             */
/* ============================= */

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

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

.align-center {
    align-items: center;
}


/* ============================= */
/* Margin Utilities              */
/* ============================= */

.m-1 {
    margin: 0.5rem;
}

.m-2 {
    margin: 1rem;
}

.m-3 {
    margin: 1.5rem;
}

.u-content-limit {
    max-width: var(--content-max-width);
    margin: 0 auto;
    width: 100%;
}


/* ============================= */
/* Padding Utilities             */
/* ============================= */

.p-1 {
    padding: 0.5rem;
}

.p-2 {
    padding: 1rem;
}

.p-3 {
    padding: 1.5rem;
}


/* ============================= */
/* Scroll Reveal                 */
/* ============================= */

.scroll-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 500ms ease,
        transform 500ms ease;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-right {
    transform: translateX(48px);
}

.scroll-reveal-right.is-visible {
    transform: translateX(0);
}

.scroll-delay-short {
    transition-delay: 100ms;
}

.scroll-delay-medium {
    transition-delay: 200ms;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}