.Comments {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;

    padding-left: 17px;
    padding-right: 17px;
}

    .Comments__Header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
    }

        .CommentsHeader__Title {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            
            font-size: 34px;
            font-weight: 700;

            width: 100%;
        }

        @media screen and (max-width: 900px){
            .CommentsHeader__Title { font-size: 34px; }
        }

            @media screen and (max-width: 800px){
                .CommentsHeader__Title { font-size: 32px; }
            }

                @media screen and (max-width: 700px){
                    .CommentsHeader__Title { font-size: 30px; }
                }

                    @media screen and (max-width: 600px){
                        .CommentsHeader__Title { font-size: 28px; }
                    }

                        @media screen and (max-width: 500px){
                            .CommentsHeader__Title { font-size: 26px; }
                        }

                            @media screen and (max-width: 400px){
                                .CommentsHeader__Title { font-size: 24px; }
                            }

        .CommentsHeader__Title > h2 {
            margin-right: 7px;
        }

        .CommentsHeader__Title > span {
            color: rgb(30, 160, 220);
        }

        .CommentsHeader__Description {
            margin-bottom: 37px;
        }

    .Comments__Rating {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        margin-bottom: 17px;
    }

        .CommentsRating__Data {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
    
            background: rgb(227, 237, 237);
            border-radius: 17px;
    
            width: 100%;

            padding-top: 7px;
            padding-bottom: 7px;
            padding-left: 17px;
            padding-right: 17px;
            margin-right: 17px;
        }

        @media screen and (max-width: 500px){
            .CommentsRating__Data {
                background: unset;
                padding: unset;
            }
        }

            .CommentsRatingData__Total {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                background: rgb(30, 160, 220);
                border-radius: 100%;

                font-weight: 700;
                text-align: center;

                width: 100%;
                height: 100%;
                min-width: 75px;
                min-height: 75px;
                max-width: 75px;
                max-height: 75px;

                margin-right: 17px;
            }

                .CommentsRatingDataTotal__Number {
                    color: rgb(227, 237, 237);
                    font-size: 24px;
                }

                .CommentsRatingDataTotal__Desc {
                    font-size: 12px;
                }

            .CommentsRatingData__Desc {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;

                text-align: left;

                width: 100%;
            }

            @media screen and (max-width: 500px){
                .CommentsRatingData__Desc {
                    display: none;
                }
            }

        .CommentsRating__Functions {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
        }

            .CommentsRating__Functions > a {
                white-space: nowrap;
                padding-top: 22px;
                padding-bottom: 22px;
            }

    .Comments__Block {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 17px;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
    }

        .CommentsBlock__Item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;

            background: rgb(255, 255, 255);
            border-radius: 17px;

            width: 100%;
            height: 100%;
            max-width: 450px;

            padding: 17px;
        }

        @media screen and (max-width: 650px){
            .CommentsBlock__Item {
                max-width: none;
            }
        }

            .CommentsBlockItem__User {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;

                width: 100%;

                margin-bottom: 17px;
            }

                .CommentsBlockItem__User > img {
                    border: 1px solid rgb(30, 160, 220);
                    border-radius: 100%;

                    width: 70px;
                    height: auto;

                    margin-right: 17px;
                }

                .CommentsBlockItemUser__Data {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: center;

                    width: 100%;
                }

                    .CommentsBlockItemUserData__Name {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: flex-start;

                        font-weight: 700;
                        text-align: left;

                        width: 100%;
                    }

                    .CommentsBlockItemUserData__Date {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: flex-start;

                        color: rgb(121, 121, 121);
                        text-align: left;

                        width: 100%;
                    }