.sxs-pcrd {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    &__samp {
        overflow: hidden;
        // height: clamp(25rem, calc(12.5rem + 12.5vw + 10vh), 40rem);
        /*height: clamp(10rem, 7.5rem + 12.5vw + 5vh, 38rem);*/
        max-height: 40rem;
        border-radius: 3px;
        background-color: $accentClear2;

        @include xl-wmin {
            // height: clamp(30rem, calc(12.5rem + 15vw + 10vh), 40rem);
            // height: clamp(10rem, 7.5rem + 12.5vw + 5vh, 38rem);
        }

        &::before {
            content: "";
            position: absolute;
            z-index: 1;
            inset: 0;
            border: 0px solid rgba($primaryClear, 0.75);
            border-width: 0px;
            transition: border-width 400ms;
            pointer-events: none;
        }

        &-wtm {
            &-1 {
                position: absolute;
                transform: scale(1);
                transition: transform cubic-bezier(0.7, 0.2, 0, 1) 1200ms;
                --_w: clamp(10rem, calc(6rem + 5vw + 5vh), 20rem);

                &::after {
                    content: "";
                    display: block;
                    // position: absolute;
                    top: 0;
                    left: 0;
                    width: var(--_w);
                    height: var(--_w);
                    border-radius: 50%;
                    border: 1px solid rgba($primaryClear, 0.75);
                    transform: translate3d(-25%, -25%, 1px);
                }
            }

            &-2 {
                position: absolute;
                bottom: 0;
                right: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: var(--_w);
                height: var(--_w);
                transform: translate3d(20%, 25%, 1px) scale(1);
                transition: transform cubic-bezier(0.7, 0.2, 0, 1) 1200ms;
                --_w: clamp(10rem, calc(6rem + 2.5vw + 2.5vh), 20rem);

                &::before,
                &::after {
                    content: "";
                    position: absolute;
                    display: block;
                    border-radius: 50%;
                    border: 1px solid rgba($primaryClear, 0.75);
                }

                &::before {
                    width: 100%;
                    height: 100%;
                }

                &::after {
                    width: 150%;
                    height: 150%;
                }
            }
        }

        .figure {
            transform: scale(1);
            transition: transform 1200ms cubic-bezier(0.7, 0.2, 0, 1);
            aspect-ratio: 1;
        }
    }

    &__text {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }

    &__txt {
        flex: 1;
    }

    &__tit {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: $text-18;
        font-weight: 700;
        margin-bottom: 0.5rem;

        @include xs-wmin {
            font-size: $text-20;
        }
    }

    &__pce {
        min-height: 1em;
        font-size: $text-18;
        display: flex;
        align-items: center;
        gap: 1rem;
        &-normal {
            text-decoration-line: line-through;
            font-size: 0.85rem;
        }
    }

    &__ftr {
        display: flex;
        margin-top: 1rem;
    }

    &__btn {
        margin-left: 0.25rem;
        flex: 1;

        @include xl-wmin {
            max-width: calc(10rem + 8ch);
            // padding-left: 5rem;
            // padding-right: 5rem;
        }

        // .sxs-btn {}
    }

    @include lg-wmin {
        @include xxl-wmax {
            &__text {
                padding: 1rem 0.75rem;
            }

            &__tit {
                font-size: $text-body;
            }

            &__pce {
                font-size: $text-14;
            }

            .sxs-qpckr {
                font-size: $text-14;

                &--v1 {
                    --buttonSize: calc(16px + 0.5rem);
                }
            }
        }
    }

    &:hover .sxs-pcrd__samp {
        &::before {
            border-width: 3px;
        }

        &-wtm {
            &-1 {
                transform: translate3d(-25%, -25%, 1px) scale(1.4);
            }

            &-2 {
                transform: translate3d(20%, 25%, 1px) scale(1.4);
            }
        }

        .figure {
            transform: scale(1.04);
        }
    }

    &--squared {
        .sxs-pcrd__samp {
            height: initial;
            min-height: 20rem;
            aspect-ratio: 1;
        }
    }

    &.suspended {
        pointer-events: none;

        .sxs-pcrd {
            &__tit {
                min-height: 2em;
            }
        }

        .sxs-qpckr,
        .sxs-btn {
            opacity: 0;
            visibility: hidden;
        }
    }
    &__tag {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: red;
        border-radius: 50%;
        color: #fff;
        width: clamp(4rem, 5vw, 5rem);
        height: clamp(4rem, 5vw, 5rem);
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        z-index: 1;
        span {
            font-size: clamp(0.6rem, 0.9vw, 0.85rem);
            font-weight: 700;
            text-align: center;
        }
        &--small-text {
            span {
                font-size: clamp(0.6rem, 0.7vw, 0.75rem);
            }
        }
    }
}