.container-reviews {





    display: grid;





    grid-template-columns: 1fr 1fr;





    gap: 20px;





    justify-content: center;





    width: 130vh;





    padding: 20px;





    box-sizing: border-box;





    margin: auto;





    max-width: 90%;





}











/* Media query per dispositivi con larghezza massima di 768px (tipicamente dispositivi mobili) */





@media screen and (max-width: 768px) {





    .container-reviews {





        display: flex;





        flex-direction: column;





        align-items: center; /* Aggiunto per centrare i contenuti */





    }





}











.reviews,





.results {





    display: flex;





    flex-direction: column;





    width: 100%;





}











.reviews {





    background-color: #202124;





    color: white;





   


}











.review {


    padding: 20px;





    border-bottom: 1px solid #444;





    display: flex;


    justify-content: center;





}











.review h2 {





    margin: 0;





    color: #fff;





}











.review p {





    margin: 10px 0;





    padding-right: 10px;





}











.author {





    font-size: 0.9em;





    color: #aaa;





}











.results {





    background-color: #e6e6e6;





    padding: 20px;





}











.results h2 {





    margin: 0 0 20px 0;





    color: #333;





}











.result-bar {





    margin-bottom: 30px;





}











.result-bar span {





    display: block;





    font-weight: bold;





    margin-bottom: 5px;





}





.review-image{


    width: 100%;


    object-fit: contain; /* Aggiunto per adattare l'immagine */


}








.bar {





    position: relative;





    background-color: #ddd;





    height: 30px;





    border-radius: 5px;





    overflow: hidden;





}











.bar .fill {





    height: 100%;





    background-color: var(--color-primary);





    position: absolute;





    top: 0;





    left: 0;





    width: 0;





    animation: fillBar 2s forwards;





}











.bar .label {





    position: absolute;





    top: 0;





    right: 10px;





    line-height: 30px;





    color: #333;





    font-weight: bold;





}











.comments {





    padding: 20px;





    background-color: #fff;





    margin: 10px;





}











.comments h2 {





    margin-top: 0;





}











/* Animazioni per riempire le barre */





@keyframes fillBar95 {





    to {





        width: 95%;





    }





}











@keyframes fillBar85 {





    to {





        width: 85%;





    }





}











@keyframes fillBar100 {





    to {





        width: 100%;





    }





}











@keyframes fillBar91 {





    to {





        width: 91%;





    }





}











@keyframes fillBar97 {





    to {





        width: 97%;





    }





}











.bar .fill {





    height: 100%;





    background-color: var(--color-primary);





    position: absolute;





    top: 0;





    left: 0;





    width: 0;





}