@media screen and (max-width: 767px) and (min-width: 480px) {
    :root {
        --base-size-h1-large: 25px;
        --base-size-t1: 19px; /* 22px if desired */
        --base-size-t2: 17px;
        --base-size-t3: 14px;
        --base-size-t4: 8px;
        --base-size-t5: 6px;
        --base-size-button: 5px;
        --scaling-factor: 2vw;
    
        /* Min and max values */
        --min-size-h1-large: 28px; /*28px*/
        --min-size-t1: 22px; /*22px*/
        --min-size-t2: 18px; /*18px*/
        --min-size-t3: 16px; /*16px*/
        --min-size-t4: 12px; /*12px*/
        --min-size-t5: 10px; /*10px*/
        --min-size-button: 10px; /*10px*/
    
        --max-size-h1-large: 60px; /**/
        --max-size-t1: 48px; /*48px*/
        --max-size-t2: 40px; /*40px*/
        --max-size-t3: 32px; /*32px*/
        --max-size-t4: 20px; /*23px*/
        --max-size-t5: 17px; /*20px*/
        --max-size-button: 18px; /*18px*/
    }
    
    .h1-large {font-size: clamp(var(--min-size-h1-large), calc(var(--base-size-h1-large) + var(--scaling-factor)), var(--max-size-h1-large));}
    
    h1, .t1 {font-size: clamp(var(--min-size-t1), calc(var(--base-size-t1) + var(--scaling-factor)), var(--max-size-t1));}
    
    h2, .t2 {font-size: clamp(var(--min-size-t2), calc(var(--base-size-t2) + var(--scaling-factor)), var(--max-size-t2));}
    
    h3, .t3 {font-size: clamp(var(--min-size-t3), calc(var(--base-size-t3) + var(--scaling-factor)), var(--max-size-t3));}
    
    h4, .t4 {font-size: clamp(var(--min-size-t4), calc(var(--base-size-t4) + var(--scaling-factor)), var(--max-size-t4));}
    
    h5, .t5 {font-size: clamp(var(--min-size-t5), calc(var(--base-size-t5) + var(--scaling-factor)), var(--max-size-t5));}
    
    .button-text {font-size: clamp(var(--min-size-button), calc(var(--base-size-button) + var(--scaling-factor)), var(--max-size-button));}
    
    }