.home {
    @include xxxl-wmin {}

    .sec-prods {
        overflow: hidden;

        &__con0 {
            padding-top: $spacing1 * .5;
            padding-bottom: $spacing1 * .5;
        }

        &__hdr {
            padding-bottom: $spacing1 * .5;
        }

        &::before,
        &::after {
            width: var(--sbw-s-1);
            height: var(--sbw-s-1);
            border-width: var(--sbw-t-1);
        }

        &::before {
            bottom: 15%;
            left: 0;
            transform: translate3d(-50%, 0, 1px);
        }

        &::after {
            right: 0;
            top: 0;
            transform: translate3d(50%, -25%, 1px);
        }
    }

    .sec-iprods {
        overflow: clip;

        &::before {
            width: var(--sbw-s-1);
            height: var(--sbw-s-1);
            border-width: var(--sbw-t-1);
        }

        &__con0 {
            padding-top: $spacing1;

            @include lg-wmin {
                padding-bottom: $spacing1;
            }
        }

        &__con1 {
            align-items: flex-start;
            --_gap: #{$spacing2};

            @include xxxl-wmin {
                --_gap: 5rem;
            }
        }

        @include lg-wmin {
            &__text {
                flex: 0 0 42.5%;
                width: 42.5%;
                max-width: 42.5%;
            }

            &__cntn {
                flex: 0 0 57.5%;
                width: 57.5%;
                max-width: 57.5%;
            }
        }

        @include xxxl-wmin {
            &__text {
                flex: 0 0 38%;
                width: 38%;
                max-width: 38%;
            }

            &__cntn {
                flex: 0 0 62%;
                width: 62%;
                max-width: 62%;
            }
        }

        &__text {
            @include lg-wmin {
                position: sticky;
                top: calc(var(--headerHeight) + .5rem);
            }

            &-con0 {
                padding: $spacing1 * .75 $commonSp;

                &-bg {
                    overflow: hidden;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: $accentClear3;

                    @include lg-wmin {
                        width: 9999px;
                    }

                    span {
                        position: absolute;
                        bottom: 0;
                        display: block;
                        width: var(--sbw-s-1);
                        height: var(--sbw-s-1);

                        &::before {
                            width: 100%;
                            height: 100%;
                            border-width: var(--sbw-t-1);
                            animation: _i9-d32gu infinite 7000ms cubic-bezier(.5, .25, .16, .78);
                        }

                        &::after {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            border: rgba($primaryClear, .25) solid;
                            border-radius: 50%;
                        }

                        @keyframes _8o-m4f9n {
                            0% {
                                transform: scale(0);
                            }

                            50%,
                            100% {
                                transform: scale(3);
                            }
                        }

                        @keyframes _i9-d32gu {
                            0% {
                                transform: scale(.96);
                            }

                            50% {
                                transform: scale(1.04);
                            }

                            100% {
                                transform: scale(.96);
                            }
                        }
                    }

                    &.anmt span::after {
                        animation: _8o-m4f9n 10000ms cubic-bezier(.6, .2, 0, 1) forwards;
                    }
                }

                @include xxxl-wmin {
                    padding: $spacing1 $commonSp;
                }
            }
        }

        &__hdr {
            margin-bottom: $spacing2;

            .sxs-icon {
                margin-right: 1rem;
                --size: clamp(2rem, calc(1rem + 2vw), 4rem);
            }
        }

        &__subtit {
            font-size: $text-17;
            line-height: 1.25;
            transition-delay: 200ms;

            @include lg-wmin {
                font-size: $text-14;
                line-height: 1.1;
            }

            @include xxxl-wmin {
                font-size: $text-18;
                line-height: 1.25;
            }
        }

        &__samp {
            // position: sticky;
            // top: var(--headerHeight);
            display: none;
            height: clamp(20rem, calc(15rem + 8vw + 10vh), 50vh);
            max-height: 40rem;
            margin-top: 2rem;

            .figure {
                transform: scale(.5);
                transition: transform 1800ms cubic-bezier(.7, .26, 0, 1);

                &.anmt {
                    transform: scale(1);
                }
            }
        }

        &__liswrp0 {
            width: 100%;
            // height: calc(15rem + 15vw + 10vh + 10rem);
            // overflow-y: auto;
            // overflow-x: hidden;
        }

        @include sm-wmin {
            &__ite {
                flex: 0 0 50%;
                width: 50%;
                max-width: 50%;
            }
        }

        @include lg-wmin {
            &__samp {
                display: block;
            }

            &__liswrp0 {
                // position: absolute;
                height: 100%;
            }
        }

        &--ltr {
            &::before {
                right: 0;
                top: 50%;
                transform: translate3d(50%, -50%, 1px);
            }

            .sec-iprods {
                &__con1 {
                    flex-direction: row;
                }

                @include lg-wmin {
                    &__text-con0 {
                        padding-right: $spacing1;

                        &-bg {
                            left: initial;
                            right: 0;
                            border-radius: 0 50px 50px 0;

                            span {
                                right: 0;
                                transform: translate3d(-50%, 25%, 1px);
                            }
                        }
                    }

                    &__liswrp0 {
                        padding-left: var(--_gap);
                    }
                }
            }
        }

        &--rtl {
            &::before {
                left: 0;
                top: 50%;
                transform: translate3d(-50%, -50%, 1px);
            }

            .sec-iprods {
                &__con1 {
                    flex-direction: row-reverse;
                }

                @include lg-wmin {
                    &__text-con0 {
                        padding-left: $spacing1;

                        &-bg {
                            border-radius: 50px 0 0 50px;
                            border-radius: 50px 0 0 50px;

                            span {
                                left: 0;
                                transform: translate3d(50%, 25%, 1px);
                            }
                        }
                    }

                    &__liswrp0 {
                        direction: rtl;
                        padding-right: var(--_gap);
                    }

                    &__lis {
                        direction: ltr;
                    }
                }
            }
        }

        &--green {

            &::before,
            &::after,
            .o_ring--before::before,
            .o_ring--before::after,
            .sec-iprods__text-con0-bg span::after {
                border-color: rgba($orange, .35);
            }
        }
    }

    .sec-blog {
        &__hdr {
            z-index: 1;
            // margin-top: calc(0px - var(--headerHeight));
            // transform: translate3d(0px, calc(var(--headerHeight)), 1px);
            // margin-bottom: calc(0px - var(--headerHeight));

            @include sm-wmax {
                padding-bottom: $spacing2;
            }

            @include lg-wmin {
                padding-top: $spacing1 * .4;
            }
        }
    }
}