.sxs-banner {
    height: 100svh;

    &::after {
        z-index: -1;
    }

    @include lg-wmax {

        .sxs-container,
        .sxs-banner__form {
            padding-bottom: 0;
        }
    }

    &__bg {
        z-index: -1;
        background-color: $duller;

        &::after {
            background: linear-gradient(180deg, rgba($duller, .9), rgba($duller, .5) 25%, rgba($duller, .5));
        }
    }

    // &__ldr {
    //     position: absolute;
    //     z-index: 5;
    //     display: flex;
    //     align-items: center;

    //     &-con0 {
    //         width: 100%;
    //         height: var(--sbw-s-3);
    //     }

    //     .sas-ldr {
    //         position: absolute;
    //         display: block;
    //         width: var(--sbw-s-3);
    //         height: var(--sbw-s-3);
    //         border: var(--sbw-t-3) solid $primaryClear;
    //         border-radius: 50%;
    //         opacity: .2;
    //     }
    // }

    &__svg {
        position: absolute;
        z-index: 1;
        bottom: 0;
        right: 0;
        width: calc(300px + 15vw + 20%);
        aspect-ratio: 1;
        max-width: 75rem;
        max-height: 75rem;
        transition: transform 3000ms cubic-bezier(.2, .2, 0, 1);
        transform: rotate(0) translate(calc(50% - 4rem), calc(30% - 5rem));
        opacity: .18;

        circle {
            // stroke-linecap: round;
            stroke-dasharray: var(--a);
            stroke-dashoffset: var(--a);
            fill: none;
            stroke: #FDDB22;
            stroke-width: 26;
            transition: stroke-dashoffset 2800ms cubic-bezier(.2, .7, 0, 1);
            transform: rotate(0);
            --a: 425;
        }

        &.active {
            transform: rotate(90deg) translate(40%, -30%);

            circle {
                stroke-dashoffset: 0;
            }
        }
    }

    &__con0 {
      
        padding-top: $spacing2;
        padding-bottom: $spacing2;
    }

    &__con1 {
        display: flex;
        flex-direction: column;
        //height: 100%;
        height: 172svh;
        

        &>.col {
            //flex: 1;
            flex: 1 1 auto;
            //flex: initial;
            padding-top: $spacing2;
            padding-bottom: $spacing2;
        }
    }

    &__con2 {
        display: flex;
        flex-direction: column;
        justify-content: center;

        &.col {
            flex: 1;
        }
    }

    &__hdr {
        // padding-top: calc(5vh + 5vw);

        .sxs-headline__title {
            text-shadow: 3px 4px 4px rgba(0, 0, 0, .3);
            color: #FFF;
        }
    }

    &__subtit {
        font-size: $text-22;
        font-weight: 300;
        line-height: 1.2;
        color: #FFF;

        @include sm-wmin {
            font-size: $text-30;
        }
    }

    &__folw {
        $size: 3rem;

        &.col {
            padding-bottom: $spacing2 * 2;
        }

        &-con0 {
            height: 0;
        }

        &-lin {
            position: absolute;
            bottom: 0;
            left: 0;
            height: $size;
            width: $size;
            transition: color $transitionDuration, opacity 1000ms $transitionDuration, transform 1000ms $transitionDuration;

            &:hover {
                .sxs-banner__folw-con1 {
                    color: $duller;
                    border-color: transparent;
                    background-color: $primaryClear;
                }

                .icon {

                    &::before,
                    &::after {
                        animation: ease-out 500ms infinite;
                    }

                    &::before {
                        transform-origin: center bottom;
                        animation-name: _follow-down;
                    }

                    &::after {
                        transform-origin: center top;
                        animation-direction: reverse;
                        animation-name: _follow-up;
                    }
                }
            }
        }

        &-con1 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            color: #FFF;
            border: 1px solid;
            border-radius: 50%;
            transition: background-color $transitionDuration;
        }

        .icon {
            font-size: $size * .5;
            color: inherit;

            &::after {
                content: "\e90b";
                position: absolute;
                left: 0;
                top: 0;
                display: block;
                height: 1em;
                width: 1em;
            }
        }
    }

    &--top {
        .sxs-container {
            border-top-width: var(--headerHeight);
        }
    }

    &--v1 {
        .sxs-banner__con2 {
            &>:first-child {
                margin-top: calc(5vh + 5vw);
            }

            // TEMP STYLE:
            &>.figure {
                $sizeUn: clamp(50px, calc(2rem + 2.25vw + 2.25vh), 150px);
                width: calc($sizeUn * 3);
                height: calc($sizeUn);
                margin-bottom: 3rem;
            }
        }
    }

    &--v2 {
        .sxs-banner {
            &__bg {
                .figure {
                    clip-path: circle(10%);
                }
            }

            &__hdr {
                padding-top: calc(5vh + 5vw);
            }
        }

        &.active {
            .sxs-banner {
                &__bg {
                    .figure {
                        clip-path: circle(10%);
                        animation: _do-h41kd cubic-bezier(.7, .3, 0, 1) 1800ms forwards;

                        @keyframes _do-h41kd {
                            0% {
                                clip-path: circle(10%);
                            }

                            100% {
                                clip-path: circle(75%);
                            }
                        }
                    }
                }
            }
        }
    }
}