.banner-page {
    position: relative;
    padding: var(--gap-s);
}

.banner-page__content {
    position: relative;
    padding: 285px 0 var(--gap-xs);
    border-radius: var(--radius-clasic);
    overflow: hidden;
    background: center / cover no-repeat;
}

.banner-page__content:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 17%, rgba(0, 0, 0, 0.34) 100%);
}

.banner-page__text {
    position: relative;
    z-index: 1;
    text-align: start;
}

/* Breadcrumbs */

.banner-page + div.breadcrumb {
    padding: 0 var(--gap-s) var(--gap-s);
    margin-top: -10px;
}

div.breadcrumb {
    user-select: none;
    position: relative;
    z-index: 1;
    padding: 30px;
}

.breadcrumb * {
    color: var(--first-color);
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--font-light);
}

.breadcrumb span {
    display: flex;
    gap: calc(var(--gap-xs) - clamp(5px, 0.6vw, 10px));
    flex-wrap: wrap;
    font-family: var(--font-light)
}

.breadcrumb span a {
	transition: color .3s
}

.breadcrumb span a:hover {
	color: var(--second-color)
}

div.breadcrumb + .centered,
div.breadcrumb + .centered-full {
	padding-top: 40px;
}

/* Responsive */

@media (max-width: 500px) {
    .banner-page__text h1 {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
}