/* ZENI 1.0 (Beta) CSS Framework by Arthur Henrique  */
/* © 2021 All Rights Reserved */

:root {
    --sm-size: 12px;
    --md-size: 24px;
    --lg-size: 48px;
    --xl-size: 64px;
}

* {
    box-sizing: border-box;
}

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

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

.row > .col {
    width: 50%;
}

.row .col-2 {
    width: 25%;
}

.row .col-4 {
    width: 75%;
}

.flex {
    display: flex;
}

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

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

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

/* JUSTIFIERS */
.z-mr-md {
    margin-right: var(--md-size);
}

.z-mt-sm {
    margin-top: var(--sm-size);
}

.z-mt-md {
    margin-top: var(--md-size);
}

.z-mb-sm {
    margin-bottom: var(--sm-size);
}

.z-mb-md {
    margin-bottom: var(--md-size);
}

.z-mb-lg {
    margin-bottom: var(--lg-size);
}

.z-pb-md {
    padding-bottom: var(--md-size);
}

.z-pb-lg {
    padding-bottom: var(--lg-size);
}

.z-pb-xl {
    padding-bottom: var(--xl-size);
}

.z-py-md {
    padding: var(--md-size) 0px;
}

.z-py-lg {
    padding: var(--lg-size) 0px;
}

.z-py-xl {
    padding: var(--xl-size) 0px;
}

.z-pa-md {
    padding: var(--md-size);
}

.z-pa-lg {
    padding: var(--lg-size);
}

.z-pa-xl {
    padding: var(--xl-size);
}

.half-width {
    width: 50%;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100vh;
}

/* FONTS */
.font-mini {
    font-size: var(--sm-size);
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
    :root {
        --sm-size: 6px;
        --md-size: 12px;
        --lg-size: 24px;
        --xl-size: 32px;
    }

    .row {
        flex-direction: column;
    }

    .row > .col {
        width: 100%;
        height: 50%;
    }

    .row > .col-2 {
        width: 100%;
    }

    .row > .col-4 {
        width: 100%;
    }

    .z-pb-xl {
        padding-bottom: 50px;
    }

    .z-mb-sm {
        margin-bottom: 6px;
    }

    .z-mt-sm {
        margin-top: 6px;
    }
}