:root {
    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-xxl: 20px;
    --radius-half: 25px;
    --radius-pill: 50px;
    --radius-circle: 50%;
}

/* globals */
    *, 
    *::before, 
    *::after {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

/* #region BORDER RADIUS */
.radius--sm {
    border-radius: 4px;
}
.radius--md {
    border-radius: 8px;
}
.radius--lg {
    border-radius: 12px;
}
.radius--xl {
    border-radius: 16px;
}
.radius--xxl {
    border-radius: 20px;
}
.radius--half {
    border-radius: 25px;
}
.radius--pill {
    border-radius: 50px;
}
.radius--circle {
    border-radius: 50%;
}
/* #endregion */