// Global styles (Think: Do you really need to?)

#toast-container > div { // stylelint-disable-line selector-max-id
    opacity: 1;
}

// Global styles (Think: Do you really need to?)

#toast-container > div { // stylelint-disable-line selector-max-id
    opacity: 1;
}

@media (max-width: 480px) {
    :root {
        --ratio: 1.2;
    }
}
@media (min-width: 480px) and (max-width: 760px) {
    :root {
        --ratio: 1.414;
    }
}
@media (min-width: 760px) {
    :root {
        --ratio: 1.5;
    }
}

:root {
    --lineHeight: 1.5;
    --baseFontSize: 112.5%;
    --stepUp1: calc(1em * var(--ratio));
    --stepUp2: calc(var(--stepUp1) * var(--ratio));
    --stepUp3: calc(var(--stepUp2) * var(--ratio));
    --stepDown1: calc(1em / var(--ratio));
}

html {
    font-size: var(--baseFontSize);
}

h1 {
    font-size: var(--stepUp3);
}

h2 {
    font-size: var(--stepUp2);
}

h3 {
    font-size: var(--stepUp1);
}

small {
    font-size: var(--stepDown1);
}

Add in basic size options for responsive sizing
Add in basic size options for responsive sizing
