.component h1 {
font-size: 3em; // the size is no longer affected by the --text-scale-ratio
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
font-size: var(--text-xl); // update the value of the font size using a different variable
}