/* Vars */
:root {
    --title-font-size: 20px;
    --title-line-height: 26px;
    
    --default-font-size: 16px;
    --default-line-height: 22px;
    
    --filters-font-size: 16px;
    
    --credits-font-size: 14px;
    --credits-line-height: 19px;
    --credits-letter-spacing: 0;
    
    --default-spacing: 15px;
    --vertical-spacing: 10px;
    --column-width: 25%;
    
    --menu-item-height: 30px;
    
    --2cols-width: calc((((100% - (18 * var(--default-spacing))) / 17) * 2) + (2 * var(--default-spacing)));
    --view-fixed-content-width: calc((((100% - (18 * var(--default-spacing))) / 17) * 10) + (9 * var(--default-spacing)));
    --view-fixed-header-width: calc((((100% - (18 * var(--default-spacing))) / 17) * 5) + (5 * var(--default-spacing)));
     
    --view-col-width: calc((((100% - (14 * var(--default-spacing))) / 15) * 1) + (1 * var(--default-spacing)));
    --view-header-width: calc((((100% - (14 * var(--default-spacing))) / 15) * 5) + (5 * var(--default-spacing)));
    --view-content-width: calc((((100% - (14 * var(--default-spacing))) / 15) * 10) + (9 * var(--default-spacing)));
    
    
    
    --body-left-margin: 62px;
    --header-height: 125px;
    
    --grey: #c2c2c2;
}
@media only screen and (min-width: 768px) {
    :root {
        --body-left-margin: var(--2cols-width);
    }
}
@media only screen and (min-width: 1024px) {
    :root {
        --title-font-size: 23px;
        --title-line-height: 29px;
    
        --default-font-size: 15px;
        --default-line-height: 19px;
        
        --filters-font-size: 14px;
        
        --credits-font-size: 14px;
        --credits-line-height: 19px;
    }
}
@media only screen and (min-width: 1280px) {
    :root {
        --title-font-size: 26px;
        --title-line-height: 32px;
    
        --default-font-size: 18px;
        --default-line-height: 22px;
        
        --credits-font-size: 15px;
        --credits-line-height: 20px;
        
        --default-spacing: 20px;
        --menu-item-height: 40px;
        
        --body-left-margin: var(--2cols-width);
        --header-height: 165px;
    }
}
@media only screen and (min-width: 1400px) {
    :root {    
        --filters-font-size: 18px;
    }
}
@media only screen and (min-width: 1920px) {
    :root {
        --title-font-size: 32px;
        --title-line-height: 38px;
    
        --default-font-size: 27px;
        --default-line-height: 32px;
    
        --filters-font-size: 22px;
    
        --credits-font-size: 16px;
        --credits-line-height: 21px;
        --credits-letter-spacing: 0;
        
        --default-spacing: 30px;
        --menu-item-height: 40px;
    }
}


h1,h2,h3,h4,h5,h6 {
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
}