.carrousel{
    display: grid;
    grid-template-areas: ". item .";
    grid-template-columns: 2fr 3fr 2fr;
    max-width: 100%;
    
}

.carrousel_item{
    grid-area: item;
    background: rgb(230, 229, 229);
    transform: scale(0.8) translateX(0%) rotate(0deg);;
    min-width: 25%;
    text-align: center;
    padding: 10px;
    height: 100%;
    filter: brightness(60%) blur(3px) opacity(0);
    border-radius: 3px;
    transition: transform ease-out 300ms; /* filter ease-in-out 150ms;  only transition filter on pc*/
    z-index: 1;
    cursor: pointer;
}
.carrousel_item:hover{
    filter: brightness(75%) blur(0px);
}


.carrousel_item_image>img{
    width: 100%;
    border-radius: 3px;     
}
.carrousel_item_image>img:hover{
    width: 100%;
    border-radius: 3px;   
}
.carrousel_item_title{
    padding: 10px 0;
}

.carrousel_item_description{
    font-size: .85rem;
    width: 80%;
    margin: 0 auto;
    padding: 8% 0;


}
.item-left{
    transform: translateX(-50%) rotate(-10deg);
    filter: brightness(60%) blur(1px) opacity(1);
    z-index: 1;
}
.item-right{
    transform: translateX(50%) rotate(10deg);
    filter: brightness(60%) blur(1px) opacity(1);
    z-index: 1;
}
.item-right:hover{
    transform: translateX(62%) rotate(16deg) translateY(-8%);
}
.item-left:hover{
    transform: translateX(-62%) rotate(-16deg) translateY(-8%);
}
.item-active{
    transform: scale(1.2);
    filter: brightness(100%) blur(0);
    z-index: 2;
}
.item-active:hover{
    filter: brightness(100%) blur(0);
    transform: scale(1.3);
}
@media(min-width: 800px){
    .carrousel{
        grid-template-columns: 2fr 1fr 2fr;
        max-width: 100%;
    }
    .carrousel_item{
        transition: transform ease-out 300ms, filter ease-in-out 150ms;
    }
}