.breadcrumbs {
    margin-bottom: 40px;
}
h1 {
    grid-column: 1/-1;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.promo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px;
    margin-bottom: 246px;
    h2 {
        text-transform: uppercase;
        font-size: 24px;
        letter-spacing: 1px;
        color: var(--white);
    }
    nav {
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        padding-right: 20px;
        .item {
            overflow: hidden;
            margin-bottom: 10px;
            &:last-of-type {
                margin-bottom: 0;
            }
        }
        a,
        p {
            color: var(--f4);
            font-size: 20px;
            display: flex;
            gap: 6px;
            letter-spacing: 0.2px;
            font-weight: 300;
            transform: translateX(-20px);
            transition: transform .2s;
            &::before {
                margin-top: 4px;
                content: '\e90c';
                font: 100 0.75lh/1 icon;
            }
        }
    }
}
@media screen and (max-width: 767px) {
    .promo-box {
        padding-top: 70px;
    }
    .breadcrumbs {
        margin-bottom: 27px;
    }
    h1 {
        font-size: 36px;
        font-weight: 600;
        line-height: 0.9;
        padding-bottom: 10px;
        margin-bottom: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .promo {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 60px;
        h2 {
            font-size: 20px;
        }
        nav {
            padding-right: 0;
            border-right: none;
            &+nav {
                border-top: 1px solid rgba(255, 255, 255, 0.2);
                padding-top: 20px;
                margin-top: 10px;
            }
            a,
            p {
                font-size: 16px;
            }
        }
    }
}
@media (hover:hover) {
    .promo nav :is(a, p):hover {
        transform: translateX(0);
    }
}