.container__opinioes {
    display: flex;
    flex-direction: column;
    row-gap: 48px;
    margin: 0 auto;
    padding: 3rem 1rem;
    width: 100%;
    max-width: 1200px;

    > h2 {
        grid-column: span 4;
        font-size: 1.5rem;
        color: var(--dark-brown);
    }

    .cards {
        display: grid;
        grid-auto-columns: minmax(90vw, 400px);
        grid-auto-flow: column;
        grid-template-rows: 100px;
        column-gap: 1rem;
        padding: 1rem .25rem;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;

        .card {
            position: relative;
            display: grid;
            grid-template-columns: 100px 1fr;
            align-items: center;
            background: var(--white);
            border-radius: 1rem;
            box-shadow: 0px 0 20px rgba(0, 0, 0, .1);
            padding: .5rem;
            transition: .3s ease-in;

            > img {
                height: 100%;
                aspect-ratio: 1 / 1;
                border-radius: 50%;
                overflow: hidden;
                object-fit: cover;
                object-position: center;
                clip-path: circle(50%);
            }

            > section {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-content: start;
                row-gap: .5rem;
                overflow: hidden;

                h3 {
                    font-size: 18px;
                    font-weight: 600;
                    text-transform: initial;
                    text-align: center;
                    color: var(--dark-brown);
                }

                p {
                    font-size: 14px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    line-clamp: 3;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .rate {
                grid-column: span 2;
                position: absolute;
                top: -12px;
                right: 0;
                display: flex;
                justify-content: end;
                flex-direction: row;
                column-gap: .5rem;
                width: auto;
                background-color: var(--white);
                
                .estrela {
                    position: absolute;
                    top: .5rem;
                    left: 5rem;
                    width: 24px;
                    height: 24px;
                    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
                    background-color: var(--gray);
                    opacity: .4;
                    z-index: 1;

                    &.full {
                        background-color: gold;
                        opacity: 1;
                    }
                    &.middle {
                        background: linear-gradient(to right,gold 50%, var(--gray) 50%);
                        opacity: .8;
                    }
                }
            }
        }
    }
}

@media (min-width: 576px) {
    .container__opinioes {
        display: flex;
        flex-direction: column;
        row-gap: 48px;
        margin: 0 auto;
        padding: 3rem 1rem;
        width: 100%;
        max-width: 1200px;

        > h2 {
            grid-column: span 4;
            font-size: 1.5rem;
            color: var(--dark-brown);
        }

        .cards {
            display: grid;
            grid-auto-columns: 25rem;
            grid-auto-flow: column;
            grid-template-rows: 100px;
            column-gap: 1rem;
            padding: 1rem .25rem;
            overflow-x: auto;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -ms-overflow-style: none;

            .card {
                position: relative;
                display: grid;
                grid-template-columns: 100px 1fr;
                align-items: center;
                background: var(--white);
                border-radius: 1rem;
                box-shadow: 0px 0 20px rgba(0, 0, 0, .1);
                padding: .5rem;
                transition: .3s ease-in;

                > img {
                    height: 100%;
                    aspect-ratio: 1 / 1;
                    border-radius: 50%;
                    overflow: hidden;
                    object-fit: cover;
                    object-position: center;
                    clip-path: circle(50%);
                }

                > section {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    justify-content: start;
                    row-gap: .5rem;
                    overflow: hidden;

                    h3 {
                        font-size: 18px;
                        font-weight: 600;
                        text-transform: initial;
                        text-align: center;
                        color: var(--dark-brown);
                    }

                    p {
                        font-size: 14px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                        line-clamp: 3;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .rate {
                    grid-column: span 2;
                    position: absolute;
                    top: -12px;
                    right: 0;
                    display: flex;
                    justify-content: end;
                    flex-direction: row;
                    column-gap: .5rem;
                    width: auto;
                    background-color: var(--white);
                    
                    .estrela {
                        position: absolute;
                        top: .5rem;
                        left: 5rem;
                        width: 24px;
                        height: 24px;
                        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
                        background-color: var(--gray);
                        opacity: .4;
                        z-index: 1;

                        &.full {
                            background-color: gold;
                            opacity: 1;
                        }
                        &.middle {
                            background: linear-gradient(to right,gold 50%, var(--gray) 50%);
                            opacity: .8;
                        }
                    }
                }
            }
        }
    }
}