@use 'variables' as *;
@use 'mixins' as *;

$zwssgrgrid: ".zwssgr";

#{$zwssgrgrid} {

    &-grid-item {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0;

        #{$zwssgrgrid} {
            &-slide-item {
                width: 33.33%;
                padding: 10px;
                box-sizing: border-box;
                margin: 0;
                display: flex;

                @include respond-below('lg') {
                    width: 50%;
                }

                @include mobile() {
                    width: 100%;
                }
            }
        }
    }

    &-grid2 {
        #{$zwssgrgrid} {
            &-grid-inner {
                background-color: var(--white-color);
                border: 1px solid var(--white-color-100);
            }

            &-date-wrap {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
        }
    }

    &-grid3 {
        #{$zwssgrgrid} {
            &-slide-item {
                width: 50%;
                padding: 10px;
                box-sizing: border-box;

                @include mobile() {
                    width: 100%;
                }
            }

            &-grid-inner {
                background-color: var(--white-color);
                border: 1px solid var(--white-color-100);
            }

            &-slide-wrap {
                align-items: inherit;

                #{$zwssgrgrid} {
                    &-review-detail {
                        width: 30%;
                        text-align: center;

                        @include mobile() {
                            width: 100%;
                        }
                    }

                    &-profile {
                        margin: 0 auto;
                    }

                    &-title {
                        margin: 20px 0 5px 0;
                    }

                    &-rating-wrap {
                        width: 65%;
                        margin: 10px auto 0;
                        justify-content: center;

                        @include mobile() {
                            width: 100%;
                        }
                    }

                    &-content-wrap {
                        padding: 0;
                        width: 60%;
                        background-color: var(--gray-color-light);
                        border-radius: var(--border-radius-large);
                        text-align: center;

                        #{$zwssgrgrid} {
                            &-content {
                                padding: 20px;
                            }
                        }
                        
                        @include mobile() {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    &-grid4 {
        #{$zwssgrgrid} {
            &-slide-item {
                text-align: center;
                width: 25%;

                @include respond-below('xl') {
                    width: 50%;
                }

                @include mobile() {
                    width: 100%;
                }
            }

            &-profile {
                margin: 0 auto 20px;
                padding-right: 0;
            }

            &-rating {
                margin: 10px auto;
            }

            &-google-icon {
                position: absolute;
                width: 20px;
                bottom: 0;
                right: 0;

                img {
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }

    &-grid5 {
        #{$zwssgrgrid} {
            &-slide-item {
                width: 50%;

                @include mobile() {
                    width: 100%;
                }
            }

            &-slide-wrap {
                #{$zwssgrgrid} {
                    &-review-info {
                        width: calc(100% - 180px);
                        padding-left: 20px;
                    }
                }
            }
        }

        
    }

    &-grid-inner {
        background: var(--gray-color-light);
        border-radius: var(--border-radius-large);
        padding: 10px;
        width: 100%;
    }

}