.page-header,
.ocf-page-header {
    position: relative;
    overflow: hidden;
    background: var(--ocf-bg-alt);
    border-bottom: 1px solid var(--ocf-border-light);
}

.page-header--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--page-header-image);
    background-size: cover;
    background-position: center;
    opacity: 0.12;
}

.page-header-inner,
.ocf-page-header__inner {
    position: relative;
    padding-block: clamp(3rem, 8vw, 6rem);
    max-width: 820px;
}

.page-header-content {
    display: grid;
    gap: 1rem;
}

.ocf-page-header__breadcrumb,
.ocf-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--ocf-label);
    font-size: var(--text-sm);
}

.ocf-page-header__title {
    margin: 0;
    color: var(--ocf-heading);
}

.ocf-page-header__subtitle {
    margin-top: 1rem;
    color: var(--ocf-body);
}

.page-header-divider {
    width: min(100%, 14rem);
}

.page-header-divider .divider {
    height: 1px;
    background: var(--ocf-border);
}