.sxs-modal {
    &-layer {
        position: fixed;
        z-index: 600;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 400ms, visibility 400ms;

        &--preset {
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);

            &.is-open {
                .sxs-modal {
                    padding: 30px;

                    &__con0 {
                        transform: scale(1);
                        transition-timing-function: cubic-bezier(0, .5, .5, 1.25);
                    }
                }
            }

            .sxs-modal {
                display: flex;
                align-items: center;
                width: 100%;
                height: 100%;

                &__bg {
                    background-color: rgba(0, 0, 0, .8);
                    cursor: pointer;
                }

                &__con0 {
                    overflow: auto;
                    display: flex;
                    flex-direction: column-reverse;
                    margin: auto;
                    max-width: 1300px;
                    width: 100%;
                    max-height: 100%;
                    padding: clamp(1rem, calc(.5rem + 1vw), 4rem);
                    transform: scale(.5);
                    transform-origin: 50% 33.33%;
                    transition: transform 400ms ease-in;
                    background-color: #FFF;
                    color: $duller;

                    .rich-text {
                        font-size: $text-14;

                        * {
                            line-height: 1.4;
                        }
                    }
                }

                &__btn-close {
                    z-index: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: $text-30;
                    height: $text-30;
                    margin-left: auto;
                    margin-bottom: 1rem;
                    font-size: $text-17;
                    font-weight: 100;
                    color: $duller;
                    background: #FFF;
                    border-radius: 50%;

                    // &::before {
                    //     content: '';
                    //     display: block;
                    //     background: $primaryClear;
                    //     border-radius: 50%;
                    //     opacity: 0;
                    //     transition: opacity $transitionDuration;
                    // }

                    span {
                        flex: 0 0 100%;
                        width: 100%;
                        max-width: 100%;
                        line-height: 1;
                    }

                    @include lg-wmin {
                        // &:hover {
                        //     color: #FFF;

                        //     &::before {
                        //         opacity: 1;
                        //     }
                        // }
                    }
                }
            }
        }

        &.is-open {
            opacity: 1;
            visibility: visible;
        }

        &:not(.is-open) {
            pointer-events: none;
        }
    }
}