/****************************
 * Header - Default
*****************************/
.site-banner.-default {
    --sb-height:clamp(250px, 25.4vw, 450px);
    --sb-width-logo:calc(var(--sb-height) * 305 / 366);
    --sb-size-logo:143px;
    position:relative; min-height:var(--sb-height); background:#f1f1f3;
    padding:40px calc(var(--sb-width-logo) + var(--br-gap-container)) 40px var(--br-gap-side);
}
.site-banner.-default .site-banner-image {position:absolute; inset:0;}
.site-banner.-default .site-title {position:relative; z-index:1; max-width:492px; color:var(--br-color-black);}

/* site logo */
.site-banner-logo {width:var(--sb-width-logo);}
.site-banner-logo img {height:120px; min-height:unset;}

/* breadcrumb */
.site-breadcrumbs .breadcrumb_last {font-weight:400; color:rgba(12, 12, 12, .6);}
.site-breadcrumbs .breadcrumb-sep {display:inline-block; padding:0 8px;}
.site-breadcrumbs a {color:rgba(12, 12, 12, .3);}
.site-breadcrumbs a:hover, .site-breadcrumbs a:focus {color:var(--br-color-primary);}

/* responsive */
@media only screen and (max-width:768px) {
    .site-banner.-default {padding-right:var(--br-gap-side);}
    .site-banner.-default .site-title {max-width:100%;}
    .site-banner-logo {display:none;}

    /* breadcrumb */
    .site-breadcrumbs .breadcrumb-sep {padding:0 4px;}
}


/****************************
 * Header - Has gray background
*****************************/
.site-banner.-primary-background {
    --grid-pos-y:-2px;
    --grid-pos-x:var(--br-gap-side);
    --shape-url:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjE0NCIgdmlld0JveD0iMCAwIDEyMCAxNDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01OC4wNDE3IDM4LjYwNTNMNDcuMzE0MiA1MC4xODg1TDEyMCAxMTYuOTQ4VjE0My40MzJIMFY0OC4wOTA0TDIyLjUxNjcgMjcuNDEwMUwzNC4xODggMTYuNjk3OEw0OS4xODYgMi45MDU2OUw0OS4zMTk3IDIuNzc5MDFMNTIuMzU1NSAwTDkwLjc0MzIgMzUuMjY0Mkw5MS4wNDIxIDM1LjUyNTVMMTIwIDYyLjQyODhWOTUuNTE1N0w3OC4wODEgNTcuMDA1NEw3OC4wNTc0IDU2Ljk5NzVMNzguMDQ5NSA1Ni45ODE3TDU4LjA0MTcgMzguNjA1M1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
    padding:40px calc(var(--br-gap-side) + 40px) 0; position:relative; background-color:#fafafa;
    justify-content:space-between; align-items:flex-end;
}
.site-banner.-primary-background:before {
    content:"";
    position:absolute; inset:40px var(--br-gap-side); background:var(--br-color-primary);
    box-shadow:0 8px 24px rgba(39, 28, 28, .12), 0 2px 4px rgba(39, 28, 28, .08); border-radius:2px;
}
.site-banner.-primary-background .site-title {
    position:relative; z-index:1;
    width:61.5%; max-width:600px; padding:40px 20px 80px 0;
}
.site-banner.-primary-background .site-banner-image {
    width:38.5%; margin-right:24px; aspect-ratio:120/144;
    -webkit-mask-image:var(--shape-url);
    mask-image:var(--shape-url);
    -webkit-mask-size:cover;
    mask-size:cover;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
}

/* responsive */
@media only screen and (max-width:1180px) {
    .site-banner.-primary-background .site-banner-image {margin-right:0;}
}
@media only screen and (max-width:1024px) {
    .site-banner.-primary-background {
        padding-left:calc(var(--br-gap-side) * 2); padding-right:calc(var(--br-gap-side) * 2);
        align-items:center;
    }
    .site-banner.-primary-background:before {top:20px; bottom:20px;}
}
@media only screen and (max-width:767px) {
    .site-banner.-primary-background {
        --grid-size:32px;
        --grid-pos-y:20px;
        padding:20px calc(var(--br-gap-side) * 2) 0;
        flex-direction:column;
    }
    .site-banner.-primary-background .site-title {width:100%; max-width:100%; padding:30px 0 0; margin-bottom:32px;}
    .site-banner.-primary-background .site-banner-image {width:100%; max-width:500px;}
}