:root{
    /** project colors **/
    --c-primary-50: #CEF6EE;
    --c-primary-400: #18E0B8;
    --c-primary-500: #12A98B;
    --c-primary-700: #095546;

    --c-blue-gray-50: #F0F3F7;
    --c-blue-gray-100: #E6EDF4;
    --c-blue-gray-200: #BCCAD9;
    --c-blue-gray-400: #6989AA;
    --c-blue-gray-500: #446C95;
    --c-blue-gray-600: #365677;
    --c-blue-gray-800: #213447;
    --c-blue-gray-900: #192736;

    --c-gray-900: #3D434C;

    --c-neutral-10: #FCFCFD;
    --c-neutral-100: #E7EAF1;
    --c-neutral-300: #ACB7CD;
    --c-neutral-500: #4D5E80;
    --c-neutral-600: #435270;
    --c-neutral-700: #303B50;

    --c-error-500: #EF4444;

    /** fonts config **/
    --font-family: "Roboto", sans-serif;
    --font-weight: 400;

    /** colors config **/
    --c-primary: var(--c-primary-500);
    --c-primary-rgb: 18,169,189;

    --c-secondary-50: var(--c-blue-gray-50);
    --c-secondary-100: var(--c-blue-gray-100);
    --c-secondary-200: var(--c-blue-gray-200);
    --c-secondary-400: var(--c-blue-gray-400);
    --c-secondary-500: var(--c-blue-gray-500);
    --c-secondary-600: var(--c-blue-gray-600);
    --c-secondary-800: var(--c-blue-gray-800);
    --c-secondary-900: var(--c-blue-gray-900);

    /** text colors config **/
    --c-text-primary: black;
    --c-text-secondary: var(--c-neutral-700);
    --c-text-light: var(--c-neutral-10);
    --c-text-metadata: var(--c-gray-900);

    /** background config **/
    --background: white;
    --background-header: linear-gradient(90deg, #FEFFFF 0%, #D3EAE8 100%);


    /** base layout config **/
    --base-spacing: 100px;
    --base-border-radius: calc(0.1 * var(--base-sp));
    --container-max-width: 1560px;


    /** articles layout config **/
    --main-articles-per-row: 3;
    --main-articles-gap: calc(0.23 * var(--base-sp));

    --list-articles-per-row: 4;
    --list-articles-gap: calc(0.2 * var(--base-sp));

    @media screen and (max-width: 991px){
        --main-articles-per-row: 2;
        --list-articles-per-row: 3;
    }
    @media screen and (max-width: 640px){
        --main-articles-per-row: 1;
        --list-articles-per-row: 2;
    }
    @media screen and (max-width: 520px){
        --list-articles-per-row: 1;
    }
}