.page-header {
    position: relative;
    min-height: 530px;
    padding: 250px var(--side-margin) 160px;
    text-align: center;
    color:  var(--color-primary);
    background: transparent;
    background-size: cover;
    background-position: center;
    overflow: visible;
    z-index: 1;
}
.page-header h1{
    margin-top: 5px;
}
.page-header--has-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-header-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--page-header-overlay, transparent);
    z-index: 0;
}

.page-header--has-bg .page-header-title,
.page-header--has-bg .page-header-content {
    position: relative;
    z-index: 1;
    color:  var(--color-primary);
}

/* Diagonal slab */
.page-header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0px;             
    width: 100%;
    height: 100px;              
    background: var(--color-primary);
    z-index: 0;
}  

.page-inner .page-header {
    /* cancel page-inner's padding */
    margin-left: calc(var(--side-margin) * -1);
    margin-right: calc(var(--side-margin) * -1);
    width: calc(100% + (var(--side-margin) * 2));
}

main.page .page-inner .page-header {
    /* cancel both page-inner AND main.page padding */
    margin-left: calc(var(--side-margin) * -2);
    margin-right: calc(var(--side-margin) * -2);
    width: calc(100% + (var(--side-margin) * 4));
}

main.page .page-inner .page-header::after {
    left: var(--side-margin);
    width: calc(100% - (var(--side-margin) * 2));
}

/* Optional: if your header has inner content that should still be padded */
.page-inner .page-header .page-header-content {
    padding-left: var(--side-margin);
    padding-right: var(--side-margin);
}