.interest-hero {
    display: flex;
    align-items: center;
    height: 80vh;
    height: 80svh;
    min-height: 500px;
    max-height: 900px;
    padding: 40px 0;
    background:
        linear-gradient(rgb(35 31 32 / 78%), rgb(35 31 32 / 88%)),
        url('/assets/images/project-urban.webp') center 56% / cover no-repeat;
}

.interest-hero p {
    color: #eee9e8;
}

.interest-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 34px;
    color: #e5ded9;
    font-size: 13px;
}

.interest-breadcrumb a,
.interest-breadcrumb span {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-weight: 400;
}

.interest-breadcrumb i {
    color: var(--satc-gold, #9d7a4d);
    font-size: 9px;
}

.interest-hero h1 {
    font-size: var(--fs-page-title, clamp(36px, 4.5vw, 60px));
}

.interest-section > .interest-wrap {
    width: 90%;
    max-width: 1720px;
}

.interest-aside,
.interest-submit,
.project-option-media > b {
    background: var(--satc-charcoal);
}

@media (max-width: 900px) {
    .interest-hero {
        height: 75vh;
        height: 75svh;
        min-height: 460px;
        max-height: 760px;
    }
}

@media (max-width: 600px) {
    .interest-section > .interest-wrap {
        width: calc(100% - 24px);
    }

    .interest-hero {
        height: 70vh;
        height: 70svh;
        min-height: 380px;
        max-height: 620px;
        padding: 32px 0;
    }

    .interest-breadcrumb {
        margin-bottom: 18px;
    }

    .interest-hero h1 {
        font-size: clamp(34px, 11vw, 46px);
        line-height: 1.25;
    }
}