:root {
    /* Desktop */
    --text-desktop-xxl: 2.625rem;
    --text-desktop-xl: 2.48813rem;
    --text-desktop-l: 2.07375rem;
    --text-desktop-m: 1.72813rem;
    --text-desktop-base: 1rem;
    --text-desktop-s: 0.83313rem;

    /* Tablet */
    --text-tablet-xxl: 2.625rem;
    --text-tablet-xl: 2.0275rem;
    --text-tablet-l: 1.60188rem;
    --text-tablet-m: 1.42375rem;
    --text-tablet-base: 1rem;
    --text-tablet-s: 0.88875rem;

    /* Mobile */
    --text-mobile-xxl: 2.625rem;
    --text-mobile-xl: 1.875rem;
    --text-mobile-l: 1.29625rem;
    --text-mobile-m: 1.215rem;
    --text-mobile-base: 1rem;
    --text-mobile-s: 0.875rem;
}

.text-xxl-resp
{ font-size: var(--text-desktop-xxl); }
.text-xl-resp  
{ font-size: var(--text-desktop-xl); }
.text-l-resp   
{ font-size: var(--text-desktop-l); }
.text-m-resp, .page-article h2  
{ font-size: var(--text-desktop-m); }
.text-base-resp, .page-article p
{ font-size: var(--text-desktop-base); }
.text-s-resp   
{ font-size: var(--text-desktop-s); }

@media (max-width: 806px) {
    .text-xxl-resp
    { font-size: var(--text-tablet-xxl); }
    .text-xl-resp
    { font-size: var(--text-tablet-xl); }
    .text-l-resp
    { font-size: var(--text-tablet-l); }
    .text-m-resp, .page-article h2
    { font-size: var(--text-tablet-m); }
    .text-base-resp .page-article p 
    { font-size: var(--text-tablet-base); }
    .text-s-resp   { font-size: var(--text-tablet-s); }
}

@media (max-width: 532px) {
    .text-xxl-resp
    { font-size: var(--text-mobile-xxl); }
    .text-xl-resp
    { font-size: var(--text-mobile-xl); }
    .text-l-resp
    { font-size: var(--text-mobile-l); }
    .text-m-resp, .page-article h2
    { font-size: var(--text-mobile-m); }
    .text-base-resp, .page-article p
    { font-size: var(--text-mobile-base); }
    .text-s-resp   { font-size: var(--text-mobile-s); }
}