/****************************
 * Header
*****************************/
.site-banner {
    --banner-line-height:60px;
    min-height:clamp(300px, 35vw, 504px);
    padding:var(--bb-header-height) var(--bb-gap-side) calc(var(--bb-spacing-60) + var(--banner-line-height) / 2);
}

/* line */
.site-banner:before {
    content:""; z-index:2;
    width:2px; height:var(--banner-line-height); background:var(--bb-color-primary);
    position:absolute; left:50%; top:100%; transform:translate(-50%, -50%);
}

/* image */
.site-banner-image:before {
    background:linear-gradient(0deg, #06132d 0%, rgba(6, 19, 45, 0) 100%);
    z-index:1; pointer-events:none;
}

/* title */
.site-title {max-width:770px;}
@media only screen and (min-width:1025px) {
    .site-title {min-height:95px;}
}

/* breadcrumb */
.site-breadcrumbs {color:rgba(255, 255, 255, .5); font-size:var(--bb-size-16); font-weight:500;}
.site-breadcrumbs > span > span:not(:last-child) {margin-right:20px;}
.site-breadcrumbs a {color:rgba(255, 255, 255, .5);}
.site-breadcrumbs a:hover, .site-breadcrumbs a:focus {color:#fff;}


/****************************
 * Header - Responsive
*****************************/
@media only screen and (max-width:1180px) {
    .site-banner {padding-top:calc(var(--bb-header-height) + var(--banner-line-height) / 2);}
    .site-title {--bb-spacing-45:var(--bb-spacing-heading);}
}
@media only screen and (max-width:480px) {
    .site-banner {
        --banner-line-height:50px;
        --bb-spacing-60:25px;
    }
    .site-title {--bb-spacing-45:10px;}
    .site-breadcrumbs > span > span:not(:last-child) {margin-right:10px;}
}