.leasing-banner {
    width: 100%;
    display: flex;
    align-items: center;

    background: color-mix(in srgb, var(--primary-color) 55%, var(--main-background-color));
}

/* The section right before this banner always ends on a block with margin-bottom: 50px
   (`.grid`, `.heading-text-section--left`...), while the section right after starts flush
   (margin-top: 0). Zeroing that trailing margin only when it's directly followed by the
   banner keeps both gaps equal to the section's own 70px padding, without touching those
   shared classes everywhere else they're used. */
.fullscreen-section--white:has(+ .leasing-banner) > *:last-child {
    margin-bottom: 0;
}

.leasing-banner__content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    padding: 48px var(--padding-website);
}

.leasing-banner__text {
    display: flex;
    flex-direction: column;
    gap: 8px;

    color: var(--base-text-color);
}

.leasing-banner__text h2 {
    font-family: var(--heading-font-family);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
}

.leasing-banner__text p {
    max-width: 520px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.leasing-banner__button {
    flex-shrink: 0;
}

@media screen and (max-width: 768px) {
    .leasing-banner__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 36px var(--padding-mobile);
    }

    .leasing-banner__button {
        width: 100%;
    }
}