:root {
    --color-main: #263045;
    --color-active: #21B6C7;
    --color-bgr: #121A2C;
    --border-radius: 8px;
    --font-size-main: 20px;
    --color-text-main: #fff;
    --color-text-main-2: #758293;
    --max-width-content: 40%;
    --gap-item: 24px;
    --column-item: 4;
    --column-height: 180px;

    --button-outline-color: #fff;
}


@media (max-width: 768px) {
    :root {
        --max-width-content: 80%;
        --column-item: 3;
        --gap-item: 18px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-main: 16px;
        --column-item: 2;
        --gap-item: 10px;
        --column-height: 140px;
    }

}

@media (max-width: 380px) {
    :root {
        --column-item: 1;
    }
}