:root {
    --baseline: 24px;

    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 18px;
    --space-lg: 24px;

    --fontspace: 12px; 
    
    --h1-size : 30px; 
    --h1-lineheight : calc(var(--fontspace) + 30px); 
    
    --h2-size : 24px;
    --h2-lineheight : calc(var(--fontspace) + 24px); 

    --h3-size : 24px; 
    --h3-lineheight : calc(var(--fontspace) + 24px); 

    --h4-size : 18px; 
    --h4-lineheight : calc(var(--fontspace) + 18px); 

    --h5-size : 16px; 
    --h5-lineheight : calc(var(--fontspace) + 18px); 

    --h6-size : 16px; 
    --h6-lineheight : var(--h5-lineheight);

    --p-size : 16px;
    --p-lineheight : var(--baseline); 

    --blockquote-size : 18px;
    --blockquote-lineheight : 30px; 

    --p-size-article : 17px;
    --p-lineheight-article : var(--baseline); 
    --p-space-article : 12px;

    --cat-button-space : 6px;  
    --cat-button-line-height : 12px; 
    --cat-button-column-gap: 6px;

    --button-space : 6px 12px; 
    --button-space-sm : 6px 12px; 
    --button-space-l: 1em 1.4em;
    --button-font-size : 1rem; 
    --button-column-gap: 12px;
    --login-sub-btn-small: 12px;

    --searchformheight : 42px;

    --pnu-imagewidht: 60px;

    --page-h1 : 36px;
    --page-h1-lineheight : calc(var(--fontspace) + 36px);
    --page-h2 : 24px;
    --page-h2-lineheight : calc(var(--fontspace) + 24px);
    --page-h3 : 18px;
    --page-h3-lineheight : calc(var(--fontspace) + 18px);
    --page-h4 : 18px;
    --page-h4-lineheight : calc(var(--fontspace) + 18px);
    --page-h5 : 16px;
    --page-h5-lineheight : calc(var(--fontspace) + 16px);
    --page-h6 : 16px;
    --page-h6-lineheight : calc(var(--fontspace) + 16px);
}

/* MEDIUM */

@media screen and (min-width: 576px) {
    :root {

    --h1-size : 36px; 
    --h1-lineheight : calc(var(--fontspace) + 36px); 
    
    --h2-size : var(--h1-size);
    --h2-lineheight : var(--h1-lineheight); 

    --h3-size : 24px; 
    --h3-lineheight : calc(var(--fontspace) + 24px); 

    --h4-size : 24px; 
    --h4-lineheight : calc(var(--fontspace) + 24px); 

    --h5-size : 18px; 
    --h5-lineheight : calc(var(--fontspace) + 18px); 

    --h6-size : 16px; 
    --h6-lineheight : var(--h5-lineheight);

    --cat-button-space : 6px 9px;  
    --cat-button-line-height : 18px; 
    --cat-button-column-gap: 9px;
    --login-sub-btn-small: 14px;

    --page-h1 : 48px;
    --page-h1-lineheight : calc(var(--fontspace) + 48px);
    --page-h2 : 30px;
    --page-h2-lineheight : calc(var(--fontspace) + 30px);
    --page-h3 : 24px;
    --page-h3-lineheight : calc(var(--fontspace) + 24px);
    }
    
}

/* LARGE */

@media screen and (min-width: 992px) {
    :root {
        --baseline: 24px;

        --space-sm: 12px; /* 12 */
        --space-md: 24px; /* 24 */
        --space-lg: 30px; /* 30 */


        --fontspace: 12px;

        --h1-size : 54px;
        --h1-lineheight : calc(var(--fontspace) + 54px); 

        --h2-size : var(--h1-size);
        --h2-lineheight : var(--h1-lineheight); 

        --h3-size : 30px;
        --h3-lineheight : calc(var(--fontspace) + 30px); 

        --h4-size : 30px;
        --h4-lineheight : calc(var(--fontspace) + 30px); 

        --h5-size : 24px;
        --h5-lineheight : calc(var(--fontspace) + 24px); 

        --h6-size : 18px;
        --h6-lineheight : calc(var(--fontspace) + 18px);


        --page-h1 : 54px;
        --page-h1-lineheight : calc(var(--fontspace) + 54px);
        --page-h2 : 36px;
        --page-h2-lineheight : calc(var(--fontspace) + 36px);
        --page-h3 : 30px;
        --page-h3-lineheight : calc(var(--fontspace) + 30px);

        --blockquote-size : 24px;
        --blockquote-lineheight : 36px; 

        --p-size-article : 18px;
        --p-lineheight-article : 30px; 
        --p-space-article : 18px;

        --button-space : 12px 18px; 
        --button-space-sm : 6px 12px; 
        --button-font-size : 1rem; 
        --button-column-gap: 12px;
    
        --searchformheight : 60px;
    }
}