:root {
    --outlook-border-color: tomato;
    --outlook-seasonal: #F20;
    --outlook-eraa: #004799;
    --outlook-reg-inv: #00A398;
    --outlook-tyndp: #00B7DD;
    --outlook-scenarios: #FC0;
    --outlook-grid-min-column: 180px;
}

#outlooks-wrapper {
    margin-left: var(--main-left-margin);
}
#outlooks-wrapper p {
    font-size: var(--p-font-size);
}
#outlooks-wrapper > h1 {
    margin: 3rem 0 2rem;
}
#grid-outlooks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--outlook-grid-min-column), 100%), 1fr));
    list-style: none;
    gap: 1rem;
    margin: 0;
}
#grid-outlooks li {
    border: 2px;
    border-style: solid;
    border-color: var(--outlook-border-color);
    padding: 0;
    margin-top: 3rem;
}
.prose--responsive #grid-outlooks li {
    padding: 1rem;
    margin-bottom: 0;
}
#grid-outlooks li::marker {
    content: "";
}
.prose ul#grid-outlooks {
    margin-left: 0;
}
#grid-outlooks h2 { 
    font-size: 1.3rem;
    line-height: 1.6rem;
}
#grid-outlooks h3 { 
    font-size: 1.05rem;
    line-height: 1.4rem;
}
#grid-outlooks p,
#grid-outlooks a {
    font-size: .9rem;
    line-height: 1.3rem;
}


.outlook-seasonal {
    --outlook-border-color: var(--outlook-seasonal);
}
.outlook-eraa {
    --outlook-border-color: var(--outlook-eraa);
}
.outlook-reg-inv {
    --outlook-border-color: var(--outlook-reg-inv);
}
.outlook-tyndp {
    --outlook-border-color: var(--outlook-tyndp);
}
.outlook-scenarios {
    --outlook-border-color: var(--outlook-scenarios);
}

#outlooks-graph {
    max-width: 900px;
    margin: 3rem 0 1rem 0;
}

#outlooks-graph text {
    fill: #333;
    font-weight: 300;
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-size: 1rem;
}
#outlooks-graph #scenarios rect { fill: #FC0; }
#outlooks-graph #TYNDP rect { fill: #00B7DD; }
#outlooks-graph #reg-inv rect { fill: #00A398; }
#outlooks-graph #ERAA { fill: #004799; }
#outlooks-graph #TYNDP text, #reg-inv text, #ERAA text { fill: white; }
#outlooks-graph #seasonal { fill: #F20; }
#outlooks-graph #seasonal text { fill: #F20; }
#outlooks-graph rect { height: 40px; }


/* Smartphones */
@media only screen and (max-width: 428px) {
    #grid-outlooks {
        --outlook-grid-min-column: 300px;
        gap: 2rem;
    }
    #outlooks-wrapper {
        margin-left: 1rem;
    }
    #outlooks-graph {
        max-width: 100%;
        margin: 2rem 0;
    }
    .prose--responsive #grid-outlooks li {
        margin-top: 0;
    }
    #outlooks-graph text {
        font-size: 1.5rem;
        font-weight: 400;
        letter-spacing: .05rem;
    }
    #outlooks-graph #scenarios text {
        transform: translate(-230px, 0);
    }
    #outlooks-graph #TYNDP text {
        transform: translate(-137px, 0);
    }
    #outlooks-graph #reg-inv text {
        transform: translate(-66px, 0);
    }
    #outlooks-graph #ERAA text {
        transform: translate(-45px, 0);
    }
    #outlooks-graph #seasonal text {
        transform: translate(13px, 0);
    }
    #outlooks-graph-timeline-labels {
        transform: translate(0, 6px);
    }
    #outlooks-graph-timeline-labels #lbl2050 {
        transform: translate(-30px, 0);
    }
    #outlooks-graph-timeline-labels #lbl2022 {
        transform: translate(20px, 0);
    }
}