#primary article.case-study {
    --case-showcase-padding-top: 140px;
    --case-section-padding-top: 60px;
    --case-section-padding-bottom: 60px;
    --case-zone-edge-padding-top: 120px;
    --case-zone-edge-padding-bottom: 120px;
}

.case-study__zone--bg-primary {
    background-color: var(--case-primary);
    --case-title-color: var(--case-title-primary, #fefefe);
    --case-body-color: var(--case-body-primary, #fefefe);
}

.case-study__zone--bg-secondary {
    background-color: var(--case-secondary);
    --case-title-color: var(--case-title-secondary, #0d1118);
    --case-body-color: var(--case-body-secondary, #0d1118);
}

#primary article.case-study .case-study__zone > section {
    padding-top: var(--case-section-padding-top);
    padding-bottom: var(--case-section-padding-bottom);
}

/*
 * Zone edge spacing.
 */

#primary article.case-study .case-study__zone--showcase > section.case-showcase {
    padding-top: var(--case-showcase-padding-top);
}

#primary article.case-study .case-study__zone--design > section:first-of-type,
#primary article.case-study .case-study__zone--key-features > section:first-of-type {
    padding-top: var(--case-zone-edge-padding-top);
}

#primary article.case-study .case-study__zone--showcase > section:last-child,
#primary article.case-study .case-study__zone--design > section:last-child,
#primary article.case-study .case-study__zone--key-features > section:last-child {
    padding-bottom: var(--case-zone-edge-padding-bottom);
}

@media screen and (max-width: 768px) {
    #primary article.case-study {
        --case-showcase-padding-top: 160px;
        --case-section-padding-top: 20px;
        --case-section-padding-bottom: 20px;
        --case-zone-edge-padding-top: 40px;
        --case-zone-edge-padding-bottom: 40px;
    }
}