/* The same component is used by native Post Title/Query Title and the page editor. */
.journal-title-banner {
    --journal-banner-padding: var(--journal-space-24) var(--journal-space-32);
    --journal-banner-radius: 8px;
    --journal-banner-accent-width: 56px;
    --journal-banner-accent-height: 3px;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--wp--style--global--wide-size);
    margin: 0;
    padding: var(--journal-banner-padding);
    background: var(--wp--preset--color--pale-teal);
    color: var(--journal-ink);
    border: 1px solid #d5e7e3;
    border-radius: var(--journal-banner-radius);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--journal-title-page);
    font-weight: 600;
    line-height: 1.55;
    text-align: start;
    overflow-wrap: anywhere;
}
.journal-title-banner::after {
    content: '';
    display: block;
    width: var(--journal-banner-accent-width);
    height: var(--journal-banner-accent-height);
    margin-block-start: var(--journal-space-12);
    background: var(--journal-gold);
}
@media (max-width: 540px) {
    .journal-title-banner { --journal-banner-padding: var(--journal-space-24); }
}