.cw-section-title { position: relative; }
.cw-section-title__text { margin: 0; }

/* Band base */
.cw-section-title--band {
    --cw-accent-w: 6px;
    display: block;
    font-weight: bold;
    padding: 14px 16px; /* vertical padding is controllable in controls; this is a baseline */
    background-color: #f5f5f2;
}

.cw-section-title--band.cw-section-title--band-small {
    --cw-accent-w: 16px;
}

/* Left accent bar */
.cw-section-title--band:before {
    content: "";
    position: absolute;
}

.cw-section-title--band.cw-section-title--band-large:before{
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--cw-accent-w);
    background-color: #c2a519; /* Accent color control overrides */
}


.cw-section-title--band.cw-section-title--band-small:before {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    width: var(--cw-accent-w);
    background-color: #c2a519; /* Accent color control overrides */
}

/* Large vs small band */
.cw-section-title--band-large { min-height: 72px; display: flex; align-items: center; }
.cw-section-title--band-small { min-height: 48px; display: flex; align-items: center; }


.cw-section-title.cw-section-title--band-large > h1.cw-section-title__text,
.cw-section-title.cw-section-title--band-large > h2.cw-section-title__text,
.cw-section-title.cw-section-title--band-large > h3.cw-section-title__text,
.cw-section-title.cw-section-title--band-large > div.cw-section-title__text,
.cw-section-title.cw-section-title--band-large > span.cw-section-title__text { font-size: 24px; font-weight: 700 }

.cw-section-title.cw-section-title--band-small > h1.cw-section-title__text,
.cw-section-title.cw-section-title--band-small > h2.cw-section-title__text,
.cw-section-title.cw-section-title--band-small > h3.cw-section-title__text,
.cw-section-title.cw-section-title--band-small > div.cw-section-title__text,
.cw-section-title.cw-section-title--band-small > span.cw-section-title__text { font-size: 20px; font-weight: 700 }

.cw-section-title.cw-section-title--underline > h1.cw-section-title__text,
.cw-section-title.cw-section-title--underline > h2.cw-section-title__text,
.cw-section-title.cw-section-title--underline > h3.cw-section-title__text,
.cw-section-title.cw-section-title--underline > div.cw-section-title__text,
.cw-section-title.cw-section-title--underline > span.cw-section-title__text { font-size: 16px; font-weight: 700}


