.allSellerDetail2{
    margin: auto;
    display: grid;
    overflow: hidden;
    grid-template-columns: 1fr 2fr;
    .right{
        background: $green;
        border-radius: 10px;
        padding: 1rem;
        position: relative;
        z-index: 2;
        .top{
            display: flex;
            justify-content: right;
            gap: 1rem;
            align-items: center;
            margin-bottom: 1rem;
            .pic{
                border-radius: 50%;
                overflow: hidden;
                img{
                    height: 5rem;
                    width: 5rem;
                    object-fit: cover;
                }
            }
            .names{
                .name{
                    font-size: 1.5rem;
                    font-weight: 900;
                    color: white;
                }
                .count{
                    font-size: 1rem;
                    font-weight: 500;
                    color: white;
                }
            }
        }
        p{
            font-size: 1rem;
            font-weight: 300;
            color: white;
            opacity: .7;
            line-height: 2.5rem;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
        }
        .options{
            display: flex;
            gap: 1rem;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 1rem;
            .option,a{
                background: white;
                border-radius: 5px;
                padding: .5rem;
                width: 8rem;
                text-align: center;
                i{
                    display: grid;
                    justify-content: center;
                    margin-bottom: .5rem;
                    svg{
                        width: 1.5rem;
                        height: 1.5rem;
                        fill: $text1;
                    }
                }
                .title2{
                    font-size: 1rem;
                    font-weight: 900;
                    color: $text2;
                    margin-bottom: .5rem;
                }
                .count{
                    font-size: 1rem;
                    font-weight: 900;
                    color: $green;
                }
            }
        }
    }
    .left{
        background: #f3f3f3;
        padding: 1rem;
        display: grid;
        position: relative;
        z-index: 1;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
        .swiper{
            display: grid;
            width: 100%;
            a{
                display: grid;
                .pic{
                    transition: all .5s ease-in-out;
                    padding: 1rem;
                    background: white;
                    border-radius: 20px;
                    border: 2px solid transparent;
                    img{
                        width: 100%;
                        height: 10rem;
                        object-fit: contain;
                    }
                    .tag{
                        position: absolute;
                        top: .5rem;
                        right: .5rem;
                        color: white;
                        font-size: .9rem;
                        font-weight: 700;
                        mask-image: url('/img/instant-discount.svg');
                        -webkit-mask-size: 100% 100%;
                        mask-size: 100% 100%;
                        background-color: red;
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        width: 50px;
                        height: 30px;
                        display: grid;
                        align-items: center;
                        justify-content: center;
                    }
                }
                .title3{
                    font-size: .9rem;
                    font-weight: 500;
                    color: $text2;
                    margin: .5rem 0;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    text-overflow: ellipsis;
                    height: 3rem;
                }
                .price{
                    display: flex;
                    justify-content: left;
                    align-items: center;
                    grid-gap: .2rem;
                    font-size: 1.2rem;
                    font-weight: 700;
                    color: $text1;
                    transition: all .3s ease-in-out;
                    &:after{
                        content: "\F06C\00FE0E";
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        font-weight: 400;
                        letter-spacing: normal;
                        font-family: digikala;
                        font-size: 1.1rem;
                        -webkit-font-smoothing: antialiased;
                        -moz-osx-font-smoothing: grayscale;
                        font-style: normal;
                        font-variant: normal;
                        font-weight: 400;
                        text-decoration: none;
                        text-transform: none;
                        line-height: 1;
                        box-sizing: inherit;
                    }
                }
                &:hover{
                    .pic{
                        border: 2px solid $green;
                    }
                }
            }
        }
        .iconL,.iconR{
            position: absolute;
            left: -1px;
            pointer-events: none;
            top: 0;
            bottom: 0;
            z-index: 5;
            display: grid;
            align-items: center;
            svg{
                height: 8rem;
            }
            path{
                fill: $allBack;
            }
        }
        .iconR{
            left: auto;
            right: -1px;
            transform: rotate(180deg);
            path{
                fill: $green;
            }
        }
        .swiper-button-prev,.swiper-button-next{
            top: 0;
            bottom: 0;
            height: 100%;
            width: 2.5rem;
            color: transparent;
        }
        .swiper-button-next{
            left: 0;
            right: auto;
        }
        .swiper-button-prev{
            right: 0;
            left: auto;
        }
    }
    @media screen and (max-width: 700px) {
        display: block;
        .right{
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            .top{
                gap: .5rem;
                margin-bottom: .5rem;
                .pic{
                    img{
                        height: 3rem;
                        width: 3rem;
                    }
                }
                .names{
                    .name{
                        font-size: 1rem;
                    }
                    .count{
                        font-size: .6rem;
                    }
                }
            }
            p{
                font-size: .8rem;
                line-height: 2rem;
            }
            .options{
                gap: .5rem;
                margin-top: .5rem;
                .option,a{
                    width: 5.6rem;
                    text-align: center;
                    i{
                        svg{
                            width: 1rem;
                            height: 1rem;
                        }
                    }
                    .title2{
                        font-size: .8rem;
                    }
                    .count{
                        font-size: .7rem;
                    }
                }
            }
        }
        .left{
            border-top-right-radius: 0;
            border-top-left-radius: 0;
            .pic{
                img{
                    height: 6rem !important;
                }
            }
            .title3{
                font-size: .7rem !important;
                height: auto !important;
            }
            .price{
                font-size: .9rem !important;
            }
            .iconL,.iconR{
                svg{
                    height: 5rem;
                }
                path{
                    fill: $allBack;
                }
                line{
                    stroke: black;
                }
            }
        }
    }
}
