.half-hero {
    height: 50vh;
    min-height: 40rem;
    max-height: 60rem;
    width: 100%;
    background: linear-gradient(to right, var(--navy), var(--federal-blue));
    background-position: center left;
    padding-bottom: 6rem;
}

.half-hero-content {
    position: relative;
    overflow: hidden;
    z-index: 20;
}

.half-hero::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 90%;
    height: 70%;
    content: "";
    background: var(--navy);
    opacity: 0.5;
    z-index: 15;
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0% 100%);

}

.half-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    content: "";
    background: var(--navy);
    opacity: 0.5;
    z-index: 15;
    clip-path: polygon(0 0, 100% 100%, 100% 100%, 0% 100%);
}


.half-hero-image {
    position: absolute;
    bottom: -5rem;
    right: 50%;
    transform: translateX(50%);
    width: 100%;
    height: calc(50% - 1rem);
    border-radius: 10px;
    z-index: 50;
}

.half-hero-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 1px 1px 8px #121212;
}

@media (min-width: 576px) {
    .half-hero-image {
        width: 60%;
    }
}

@media (min-width: 768px) {

    .half-hero-content .cta-block {
        width: 60%;
        margin-left: 0 !important;
    }

    .half-hero-image {
        position: absolute;
        bottom: -5rem;
        right: -1rem;
        width: 40%;
        height: calc(100% - 2rem);
        border-radius: 10px;
        z-index: 50;
        transform: translateX(0);
    }

    .half-hero::before {
        height: 50%;
        width: 80%;
    }
}