.cta-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    padding-top: 40px;
    padding-bottom: 80px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    @media only screen and (min-width: 576px) {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    @media only screen and (min-width: 992px) {
        padding-top: 40px;
        padding-bottom: 120px;
    }

    .container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
        z-index: 2;

        @media only screen and (min-width: 992px) {
            gap: 90px;
        }

        .two-column-wrapper {
            display: flex;
            flex-direction: column;
            gap: 40px;
            width: 100%;

            @media only screen and (min-width: 992px) {
                flex-direction: row;
                align-items: center;
                gap: 90px;
            }

            .image-column {
                flex: 1;
                display: flex;
                justify-content: center;

                @media only screen and (min-width: 992px) {
                    flex: 0 0 calc(790px / 1480px * 100%);
                    max-width: calc(790px / 1480px * 100%);
                }

                .image {
                    position: relative;
                    width: 100%;
                    max-width: 790px;
                    aspect-ratio: 790 / 596;

                    .img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }

            .text-column {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 24px;
                align-items: flex-start;
                justify-content: flex-start;

                @media only screen and (min-width: 992px) {
                    flex: 0 0 calc(100% - (790px / 1480px * 100%) - 90px);
                    gap: clamp(24px, calc(24px + 56 * ((100vw - 992px) / 608)), 80px);
                    align-items: flex-start;
                }

                .headline {
                    color: #333;
                    font-family: "League Spartan";
                    font-size: clamp(1.5rem, calc(0.5rem + 3vw), 2.5rem);
                    font-style: normal;
                    font-weight: 800;
                    line-height: 110%;
                    text-transform: capitalize;
                    margin: 0;
                    text-align: left;

                    @media only screen and (min-width: 992px) {
                        font-size: clamp(2rem, calc(1rem + 2vw), 3rem);
                    }
                }

                .text {
                    color: #666;
                    font-family: Dosis;
                    font-size: clamp(1rem, calc(0.75rem + 0.5vw), 1.25rem);
                    font-style: normal;
                    font-weight: 500;
                    line-height: 140%;
                    margin: 0;

                    @media only screen and (min-width: 992px) {
                        font-size: clamp(1.125rem, calc(0.875rem + 0.5vw), 1.375rem);
                    }
                }

                .button {
                    align-self: flex-start;
                    margin-top: 0;
                    padding: 0;
                }
            }
        }
    }

    .swiper-controls {
        position: absolute;
        bottom: 40px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        z-index: 1;
        align-items: center;

        .indicator {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            width: fit-content;

            .progressbar {
                position: relative;
                width: clamp(6.938rem, calc(1.375rem + 14.833vw), 12.5rem);
                height: 2px;
                flex: 1 0 0;
                background: rgba(255, 255, 255, 0.20);
            }

            .current, .total {
                color: #FFF;
                font-family: "League Spartan";
                font-size: clamp(0.875rem, calc(0.625rem + 0.667vw), 1.125rem);
                font-style: normal;
                font-weight: 700;
                line-height: normal;
            }
        }

        .prev,
        .next {
            &:not(.swiper-button-disabled) {
                cursor: pointer;

                &:hover {
                    svg {
                        color: #258CCF;
                    }
                }

                svg {
                    color: #FFFFFF;
                }
            }

            svg {
                color: rgba(255, 255, 255, .5);
            }
        }

        .next {
            transform: rotate(180deg);
        }
    }
}