#feedback {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--font-family);

    .tittle {
        padding: calc(var(--large-padding)/2);

        h2 {
            color: var(--clr-70);
            font-size: 3rem;
        }
        p {
            text-align: center;
            font-size: 1.5rem;
        }
    }

    .content-testimonial {
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 25rem;

        .feedback-list {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .feedback-item {
                position: absolute;
                width: 85vw;
                height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 1rem;
                margin: 1rem 0;
                border-radius: var(--border-radius);
                /* animacion */
                box-shadow: none;
                opacity: 0;
                transform: scale(0.2);
                box-shadow: var(--shadow-00);
                transform-origin: bottom;
                transition: all 0.4s ease;

                #userReview {
                    width: 6rem;
                    height: 6rem;
                    border-radius: 50%;
                    object-fit: cover;
                    margin-bottom: var(--space-between-element);
                    transition: transform .4s ease;
                }

                h3 {
                    color: var(--clr-90);
                    margin-bottom: var(--space-between-element);
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    a, img {cursor: pointer;}
                    
                    img {
                        width: 2rem;
                        height: 2rem;
                    }
                    a {
                        font-size: 1.25rem;
                        font-family: var(--font-family-title);
                    }
                }

                p {
                    font-family: var(--font-family);
                    font-size: 1rem;
                    color: var(--clr-70);
                }
            }
            .active {
                transform: scale(1);
                opacity: 1;
                transition: all 0.4s ease;
            }
        }
    }
}

@media (max-width: 768px) {
    #feedback {
        height: auto;

        .tittle {
            padding: calc(var(--large-padding)/2);
            text-align: center;
    
            h2{
                font-size: 2.5rem;
                margin-bottom: 1rem;
            }
            p {
                font-size: 1.1rem;
            }
        }
        & .content-testimonial {

            .feedback-item {
                padding: var(--space-between-element);
            }
        }
    }
}