.cta.bg-navy-blue {
    background: linear-gradient(to bottom, #1b689f 0%, #062d49 100%);
}

.cta {
    position: relative;
    z-index: 1;
}

.cta-left {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 130px;
}

.cta-right {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 135px;
}

.cta__content {
    position: relative;
    z-index: 3;
}


@media(min-width: 768px) {

    .cta-left,
    .cta-right {
        max-width: 295px;
        height: 100%;
        object-fit: cover;
    }

    .cta--overlay {
        padding-bottom: 235px;
    }

    .cta--product {
        padding-bottom: 238px;
    }
}


@media(min-width: 1200px) {
    .cta__content p {
        max-width: 832px;
        margin: 0 auto 18px;
    }

    .cta-left {
        max-width: 740px;
    }

    .cta-right {
        max-width: 702px;
    }

    .cta--overlay {
        padding-bottom: 167px;
    }
}

.cta-gradient {
    position: relative;
    z-index: 1;
}

.cta-gradient__image {
    height: 149px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 38% 100%);
}

.cta-gradient__text {
    padding: 30px 22px 50px;
}

.cta-gradient__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: -1;
}

.cta-gradient::after {
    content: '';
    position: absolute;
    width: 270px;
    height: 50px;
    background: #EBEBEB;
    opacity: 0.5;
    right: 0;
    bottom: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}

@media (min-width: 768px) {
    .cta-gradient__image {
        height: 282px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 38% 100%);
        margin-left: 58px;
    }

    .cta-gradient__text {
        padding: 30px 52px 70px;
    }

    .cta-gradient::after {
        width: 459px;
        height: 59px;
        bottom: 55px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
    }
}

@media (min-width: 1200px) {
    .cta-gradient__image {
        position: absolute;
        height: 100%;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 49% 100%);
        margin-left: 0;
        right: 0;
        top: 0;
        width: calc(50% + 81px);
    }

    .cta-gradient__text {
        padding: 30px 52px 70px;
    }

    .cta-gradient::after {
        width: calc(50% + 200px);
        height: 59px;
        bottom: 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
        z-index: -1;
    }

    .cta-gradient__text {
        width: 50%;
        padding: 100px 16px;
    }

    .cta-gradient__text__wrap {
        max-width: 616px;
        margin-left: auto;
    }
}