:root {
    /* Base colors */
    --marine-blue: #003C71;
    --marine-blue-80: #33638D;
    --marine-blue-60: #668AAA;
    --marine-blue-50: #003C7180;
    --marine-blue-20: #CCD8E3;
    --marine-blue-10: #E5EBF0;
    --marine-blue-5: #F2F5F8;

    --red: #F5866C;
    --red-50: #efc4b4;
    --red-soft: #FAC2B5;

    --yellow: #FFD26C;
    --yellow-50: #f7eeaa;
    --green: #73C6A1;
    --green-80: #73C6A1BB;
    --green-50: #c4e4cd;
    --background-primary: #D9E3EC;

    --grey-disabled: #C9CDD0;
    --ultralight-grey: #f5f5f5;
    --grey-50: #cccccc80;

    --error: #880D18;

    /* Statuses */
    --status-green: var(--green);
    --status-red: var(--red);
    --status-indeterminate: var(--marine-blue-60);

    /* Layout */
    --portal-width: 2000px;
    --company-page-width: 1800px;

    /* Shadows */
    --container-shadow: 0 2px 6px 0 rgba(72, 135, 177, 0.20);

    /* Grids */
    --landing-page-grid: 1fr 1fr 1fr;
    --internal-people-section-grid: 1fr 1fr 1fr;
}

@media screen and (max-width: 1100px) {
    :root {
        --landing-page-grid: 1fr;
        --internal-people-section-grid: 1fr 1fr;
    }
}

@media screen and (max-width: 800px) {
    :root {
        --internal-people-section-grid: 1fr;
    }
}