.page-header {
position: relative;
z-index: 1;
overflow: hidden;
min-height: clamp(120px, 12vw, 170px);
margin-top: -31.2px;
display: flex;
align-items: center;
}
.page-header__media {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
} .page-header__media::after {
content: '';
position: absolute;
inset: 0;
background-color: var(--color-primary-soft); opacity: 0.85;
} .page-header__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: clamp(24px, 4vw, 64px);
row-gap: 12px;
width: 100%; padding-top: calc(31.2px + 20px);
padding-bottom: 24px;
}
.page-header__title {
font-size: clamp(22px, 2.6vw, 32px);
font-weight: 800;
color: var(--color-background);
text-transform: uppercase;
letter-spacing: -0.01em;
margin: 0;
}
.page-header__breadcrumb {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
max-width: min(36vw, 420px);
font-size: 14px;
color: rgba(255, 255, 255, 0.65);
white-space: nowrap;
} .page-header__breadcrumb-current {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.page-header__breadcrumb a {
color: rgba(255, 255, 255, 0.65);
transition: color var(--transition-base);
}
.page-header__breadcrumb a:hover,
.page-header__breadcrumb a:focus-visible {
color: var(--color-background);
}
.page-header__breadcrumb-current {
color: var(--color-background);
font-weight: 600;
}
@media (max-width: 600px) {
.page-header__breadcrumb {
justify-content: flex-start;
max-width: 100%;
}
.page-header {
align-items: flex-start;
} .page-header__inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
padding-top: 52px;
padding-bottom: 20px;
}
}