.text-section-block {
    padding: var(--text-section-block-padding);
    background: var(--text-section-block-bg);
    color: var(--text-section-block-color);
}

.text-section-block-inner {
    max-width: var(--text-section-block-inner-max-width);
}

.text-section-block h2 {
    margin: var(--text-section-block-heading-margin);
    color: var(--text-section-block-heading-color);
    font-size: var(--text-section-block-heading-size);
    line-height: var(--text-section-block-heading-line-height);
    letter-spacing: var(--text-section-block-heading-letter-spacing);
}

.text-section-block .rich-text {
    max-width: var(--text-section-block-rich-text-max-width);
}

/* Give consecutive text blocks better rhythm */

.text-section-block + .text-section-block {
    padding-top: var(--text-section-block-consecutive-padding-top);
}

/* Variants */

.text-section-block-surface {
    --text-section-block-bg: var(--color-surface);
}

.text-section-block-panel {
    --text-section-block-bg: var(--color-panel);
    --text-section-block-color: var(--color-white);
    --text-section-block-heading-color: var(--color-white);

    --rich-text-color: var(--text-section-block-panel-rich-text-color);
    --rich-text-strong-color: var(--text-section-block-panel-rich-text-strong-color);
    --rich-text-heading-color: var(--text-section-block-panel-rich-text-heading-color);
    --rich-text-link-color: var(--text-section-block-panel-rich-text-link-color);
}