/* Five-part divider: left-end + left tile + mid chevron + right tile + right-end
   Line Y is tuned to the horizontal stroke row in mid.png (~5.5px from top @ 32px). */

.modular-divider {
    display: flex;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.modular-divider__end {
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
}

.modular-divider__end--left {
    background-image: url(/assets/left-end-k_Qy2CAc.png);
}

.modular-divider__end--right {
    background-image: url(/assets/right-end-BeVD3UPh.png);
    background-position: right center;
}

.modular-divider__repeat {
    flex: 1 1 0;
    min-width: 0;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center;
}

.modular-divider__repeat--left {
    background-image: url(/assets/left-E1zMTY_s.png);
}

.modular-divider__repeat--right {
    background-image: url(/assets/right-B7VfnRp7.png);
}

.modular-divider__mid {
    flex: 0 0 auto;
    background: url(/assets/mid-CpsQLXSF.png) no-repeat center top / contain;
}

/* Panel heroes — scale tuned via --modular-divider-mid-h (mid art is 32px tall @ 105px wide) */
.modular-divider--panel {
    --modular-divider-mid-h: 0.875rem;
    --modular-divider-line-h: calc(var(--modular-divider-mid-h) * 4 / 32);
    --modular-divider-line-y: calc(var(--modular-divider-mid-h) * 5.5 / 32);
    --modular-divider-end-w: calc(var(--modular-divider-mid-h) * 103 / 32);
    --modular-divider-mid-w: calc(var(--modular-divider-mid-h) * 105 / 32);
    height: var(--modular-divider-mid-h);
    margin-top: 1rem;
}

.modular-divider--panel .modular-divider__end,
.modular-divider--panel .modular-divider__repeat {
    margin-top: var(--modular-divider-line-y);
    height: var(--modular-divider-line-h);
}

.modular-divider--panel .modular-divider__end {
    width: var(--modular-divider-end-w);
}

/* Mid art bleeds to the edges; pull line tiles 1px over the join to avoid a hairline gap. */
.modular-divider--panel .modular-divider__repeat--left {
    margin-right: -1px;
}

.modular-divider--panel .modular-divider__repeat--right {
    margin-left: -1px;
}

.modular-divider--panel .modular-divider__mid {
    width: var(--modular-divider-mid-w);
    height: var(--modular-divider-mid-h);
    transform: translateY(-0.5px);
}