/****************************
 * Banner:
 * Col left: Title + Breadcrumb + Description
 * Col right: Tile + Image
*****************************/
.site-banner.-listing {--sb-col-left-width:38%; max-height:451px;}

.site-banner.-listing .site-banner--col.left {width:var(--sb-col-left-width); padding:var(--px-spacing-50) var(--px-spacing-50) var(--px-spacing-50) var(--px-gap-side);}
.site-banner.-listing .site-banner--col.right {width:calc(100% - var(--sb-col-left-width));}
.site-banner.-listing .site-banner-description {max-width:426px;}

.site-banner.-listing .site-banner--tile {width:18%; height:451px;}
.site-banner.-listing .site-banner--image {width:82%; height:451px;}

.site-banner.-listing.no-tile {--sb-col-left-width:50%;}
.site-banner.-listing.no-tile .site-banner--image {width:100%; height:400px;}
.site-banner.-listing.no-tile .site-banner-description {max-width:600px; font-size:15px; display:block;}

.site-banner.-listing .site-breadcrumbs > span {justify-content:flex-start;}

@media only screen and (min-width:1921px) {
    .site-banner.-listing {--sb-col-left-width:50%;}
}

@media only screen and (max-width:1279px) {
    .site-banner.-listing .site-banner--col.left {width:45%; padding-right:16px;}
    .site-banner.-listing .site-banner--col.right {width:55%;}

}

@media only screen and (min-width:769px) {
    .site-banner.-listing .site-banner--col.right.hidden-tablet-v {display:flex;}
}

@media only screen and (max-width:768px) {
    .site-banner.-listing {min-height:190px; padding-top:0;}

    .site-banner.-listing .site-banner--col.left,
    .site-banner.-listing .site-banner--col.right {width:100%;}

    .site-banner.-listing .site-banner--col.left {padding-top:48px; padding-bottom:48px;}
}

/* project */
body.list-project .page-title {--px-color-heading:#dd814f;}
body.list-project .site-breadcrumbs span,
body.list-project .site-breadcrumbs a {color:#dd814f;}

body.list-project .site-banner--col.left {
    --px-color-text:var(--px-color-white); --px-color-heading:var(--px-color-white);
    background-color:var(--px-color-brown); color:var(--px-color-white);
}
body.list-project .breadcrumb_last {color:var(--px-color-white);}