/****************************
 * Header
*****************************/
.site-banner-description {font-size:var(--px-size-18); font-weight:500; max-width:768px;}
.site-banner-image {aspect-ratio:1312/640; max-width:var(--px-container);}

/* heading */
.page-title {--px-spacing-heading:var(--px-spacing-24);}

/* Breadcrumbs */
.breadcrumb-sep {padding:0 10px; font-size:.8em;}
.site-breadcrumbs .last {color:var(--px-color-black); display:inline-block; font-weight:700;}
.breadcrumb_last > * {
    -webkit-line-clamp:1; -webkit-box-orient:vertical; display:-webkit-box;
    white-space:normal; max-width:159px; text-align:left;
}

.site-breadcrumbs a {text-decoration:underline; font-weight:500;}
.site-breadcrumbs a:hover,
.site-breadcrumbs a:focus {color:var(--px-color-primary) !important;}

/* site breadcrumbs overflow */
.site-breadcrumbs {max-width:var(--px-container); overflow:hidden; position:relative; font-size:var(--px-size-14);}
.site-breadcrumbs > span {display:flex; align-items:center; gap:15px; justify-content:center;}
.site-breadcrumbs > span i {font-size:12px;}
.site-breadcrumbs > span:last-child {white-space:nowrap;}

@media only screen and (max-width:768px) {
    .site-banner {padding-top:28px; margin-bottom:28px;}
    .site-breadcrumbs {margin-bottom:15px; font-size:12px;}
    .site-breadcrumbs > span {gap:4px;}
    .site-breadcrumbs-title:has(.site-banner-description) .page-title {--px-spacing-heading:9px;}

    .site-banner-image {
        aspect-ratio:1; /*420/315*/
        margin-top:25px;
        max-width:unset;
    }
}