* {
    padding: 0;
    margin: 0;
}

:root {
    /*72px*/
    --font-size-xxxl: 4.5rem;
    /*64px*/
    --font-size-xxl: 4rem;
    /*48px*/
    --font-size-xl: 3rem;
    /*32px*/
    --font-size-l: 2rem;
    /*28px*/
    --font-size-md: 1.75rem;
    /*24px*/
    --font-size-s: 1.5rem;
    /*20px*/
    --font-size-xs: 1.25rem;
    /*16px*/
    --font-size-xxs: 1rem;
    /*14px*/
    --font-size-xxxs: 0.875rem;
}

/* Utility Classes */
.p-abs {
    position: absolute;
}

.p-rel {
    position: relative;
}

.d-flex {
    display: flex;
}

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

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

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

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

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

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

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

.gap-8 {
    gap: 8px;
}

.gap-16 {
    gap: 16px;
}

.gap-24 {
    gap: 24px;
}

.border-box {
    box-sizing: border-box;
}

.h-a {
    height: auto;
}

.h-fill {
    height: -webkit-fill-available;
}

.h-100 {
    height: 100%;
}

.w-fill {
    width: -webkit-fill-available;
}

.w-100 {
    width: 100%;
}

.w-50 {
    width: 50%;
}

.w-3 {
    width: 33%;
}

.all-caps {
    text-transform: uppercase;
}

.fit {
    object-fit: contain;
}

.hidden-scroll::-webkit-scrollbar {
    display: none;
}

/*====================BreakPoints======================*/
@media only screen and (max-width:1024px) {
    html {
        font-size: 12px;
    }
}