@font-face {
    font-family: 'Onest';
    src: url('./Onest-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
:root {
    --color-light: #E8EEF3;
    --color-dark: #2D364E;

    --body-h-padding: 200px; /* отступы справа и слева у страницы */
    --body-t-padding: 200px; /* отступ от заголовка сверху */
    --body-gap:120px; /* промежутки между основными блоками */

    
    /* h1 заголовок главной страницы */
    --h1-site-title-font-size: 88px;
    --h1-site-title-line-height: 88px;
    --h1-site-title-font-weight: 660;

    /* текст описание главной страницы */
    --text-site-description-font-size: 24px;
    --text-site-description-line-height: 28px;
    --text-site-description-font-weight: 400px;

    /* пропорция высоты идщка арта в кейсе */
    --case-height-ratio: 1.4;

    /* количество колонок в списке кейсов */
    --case-num-columns: 4;
}

@media (max-width: 1024px) {
    :root {
       /* количество колонок в списке кейсов */
         --case-num-columns: 3;
    }
}

body{
    display: flex;
    flex-direction: column;
    gap: var(--body-gap);
    font-family: 'Onest', sans-serif;
    background-color: var(--color-light);
    color: var(--color-dark);
    padding: var(--body-t-padding) var(--body-h-padding) 0px var(--body-h-padding) ;
}

.pageHeader{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.siteTitle{
    font-size: var(--h1-site-title-font-size);
    line-height: var(--h1-site-title-line-height);
    font-weight: var(--h1-site-title-font-weight);
}
.siteDescription{
    font-size: var(--text-site-description-font-size);
    line-height: var(--text-site-description-line-height);
    font-weight: var(--text-site-description-font-weight);
}
.casesWrapper{
    display: grid;
    grid-template-columns: repeat( var(--case-num-columns) , 1fr);
    gap: 24px;
}
.casesWrapper .caseItem{
    
}
.casesWrapper .caseArt{
    background-color: #d4d4e1;
    height: auto;
    padding-bottom: calc(100% * var(--case-height-ratio));
}
.casesWrapper .caseDescription{
}