header .bottom::before {
    border-bottom: none;
}
.promo-box {
    --box-bg-color: var(--2);
    --box-bg: url(../images/projects/red-bg.webp);
    --img-gradient: linear-gradient(-90deg, rgba(144, 0, 32, 0.1) 80%, #900020 100%);
    position: relative;
    padding-block: 144px 40px;
    margin-bottom: 40px;
    background: var(--box-bg-color);
    &.white-box {
        --box-bg-color: var(--white);
        --box-bg: url(../images/projects/white-bg.webp);
        --img-gradient: linear-gradient(-90deg, rgba(255, 255, 255, 0.1) 80%, #fff 100%);
        h1 {
            color: var(--text);
        }
        :where(.content, .promo-text) * {
            color: var(--5);
        }
        .breadcrumbs :where(a, p) {
            color: var(--text5);
        }
        &::after {
            background: var(--box-bg) center center / cover;
        }
    }
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: url(../images/noise-r.webp) left top / 100% 100%, var(--box-bg) center center / cover;
    }
    * {
        color: var(--white);
    }
    > *:not(.image) {
        position: relative;
        z-index: 1;
    }
    .breadcrumbs {
        margin-bottom: 57px;
    }
    h1 {
        font-size: 80px;
        font-weight: 600;
        letter-spacing: 0.2px;
        text-transform: none;
    }
    .image {
        position: absolute;
        top: 0;
        right: 0;
        width: 40%;
        height: 100%;
        pointer-events: none;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background: var(--img-gradient);
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
@media (max-width: 1080px) {
    .promo-box {
        padding-block: 100px 30px;
        .breadcrumbs {
            margin-bottom: 27px;
        }
        h1 {
            font-size: 60px;
        }
    }
}
@media (max-width: 768px) {
    .promo-box {
        padding-block: 50px 30px 20px;
        h1 {
            font-size: 36px;
            line-height: .9;
        }
    }
}
@media (hover:hover) {
    .promo-box.white-box .breadcrumbs a:hover {
        color: var(--2);
    }
}