.component h1 {
    font-size: 3em; // not ideal -> the size is no longer updated when we change the 2 main text variables
    font-size: var(--text-xl); // update the value of the font size using a different variable
    font-size: calc(var(--text-base-size) * 3); // use base size to create new value - off scale
    font-size: calc(var(--text-xxl) - 0.8em); // use original font size to create new value - off scale
}