:root{
    --size--2: 2px;
    --size--4: 4px;
    --size--8: 8px;
    --size--16: 16px;
    --size--24: 24px;
    
    --border-radius--main: var(--size--8);
    --border-radius--round: 100vw;
    
    --color--black: #100F13;
    --color--white: #ffffff;
    --color--dark-blue: #212121;
    --color--grey-800: #838383;
    --color--grey-700: #C9C9C9;
    --color--grey-600: #f3f3f3;
    --color--brand-blue: #00AAFF;
    --color--brand-red: #FF4053;
    --color--brand-purple: #965EEB;
    --color--brand-green: #04E061;
    --color--gradient: linear-gradient(180deg, #D1D2D3 0%, #E4E5E6 100%);

    --font-size--h1: 100px;
    --font-size--h2: 72px;
    --font-size--h3: 40px;
    --font-size--h4: 24px;
    --font-size--p1: 19px;
    --font-size--p2: 15px;

    --line-height--0-9: 0.9 ;
    --line-height--1: 1 ;
    --line-height--1-2: 1.2 ;
    --line-height--1-3: 1.3 ;

    --letter-spacing--4: -0.04em;
    --letter-spacing--1: -0.01em;
    --letter-spacing--headline: var(--letter-spacing--4); 

    --case-card-padding: var(--size--24);

    --gap--main: var(--size--4);
    --gap--main-half: var(--size--2);
    
    --case-img--width: 550px;
    --case-img--height: 250px;
    
    --container-width: 1168px;
    --col-width:384px;
}


/* Брейкпоинт 960-1200px */
@media screen and (max-width: 1200px) {
  :root {
    --font-size--h1: 72px;
    --font-size--h2: 56px;
    --font-size--h3: 32px;
    --font-size--h4: 20px;
    
    --case-img--width: 435px;
    --case-img--height: 198px;
    
    --container-width: 944px;
    --col-width: 310px;
  }
}

/* Брейкпоинт 640-960px */
@media screen and (max-width: 959px) {
  :root {
    --font-size--h1: 56px;
    --font-size--h2: 44px;
    
    --case-img--width: 435px;
    --case-img--height: 198px;
    
    --container-width: 624px;
    --col-width: 620px;
  }
}

/* Брейкпоинт 480-640px */
@media screen and (max-width: 639px) {
  :root {    
    --font-size--h1: 28px;
    --font-size--h2: 28px;    
    --font-size--h3: 24px;
    --font-size--p1: 17px;
    --case-img--width: 410px;
    --case-img--height: 186px;
  }
}
/* Брейкпоинт 340-480px */
@media screen and (max-width: 479px) {
  :root {    
    --case-img--width: 292px;
    --case-img--height: 132px;
  }
}
@media screen and (max-width: 479px) {
    :root {
        --container-width: 340px;
    }
}
@media screen and (max-width: 339px) {
    :root {
        --container-width: 300px;
    }
}