*{
    margin: 0; padding: 0;
    box-sizing: border-box;
    font-family: var(--Prompt);
   /*  text-transform: capitalize; */
    transition:all .2s cubic-bezier(.34,1.12,.68,1.31);
}

.gallery{
    min-height: 100vh;
    padding-bottom: 100px;
}

.gallery .controls{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding:20px 0;
    list-style: none;
}

:root {
    --color_gradiente1: rgba(47,71,224,1);
    --color_gradiente2: rgb(119, 31, 170);
}
.gallery .controls .buttons{
    height:40px;
    width: 140px;
    color:rgb(255, 253, 253);
    font-size: 20px;
    line-height: 40px;
    cursor: pointer;
    margin:20px;
    box-shadow: 0 3px 5px rgba(0,0,0,.3);
    text-align: center;
    border-radius: 10px 0 !important;
    background: rgba(47,71,224,1);
    background: -moz-linear-gradient(45deg, rgba(47,71,224,1) 0%, rgba(33,132,237,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(47,71,224,1)), color-stop(100%, rgba(33,132,237,1)));
    background: -webkit-linear-gradient(45deg, rgba(47,71,224,1) 0%, rgba(33,132,237,1) 100%);
    background: -o-linear-gradient(45deg, rgba(47,71,224,1) 0%, rgba(33,132,237,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(47,71,224,1) 0%, rgba(33,132,237,1) 100%);
    background: linear-gradient(45deg, rgba(47,71,224,1) 0%, rgba(33,132,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f47e0', endColorstr='#2184ed', GradientType=1 );
}
.gallery .controls .buttons:hover {
    background: rgb(24, 39, 139);
    background: -moz-linear-gradient(45deg, var(--color_gradiente1) 0%, var(--color_gradiente2) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, var(--color_gradiente1)), color-stop(100%, var(--color_gradiente2)));
    background: -webkit-linear-gradient(45deg, var(--color_gradiente1) 0%, var(--color_gradiente2) 100%);
    background: -o-linear-gradient(45deg, var(--color_gradiente1) 0%, var(--color_gradiente2) 100%);
    background: -ms-linear-gradient(45deg, var(--color_gradiente1) 0%, var(--color_gradiente2) 100%);
    background: linear-gradient(45deg, var(--color_gradiente1) 0%, var(--color_gradiente2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=var(--color_gradiente1), endColorstr=var(--color_gradiente2), GradientType=1 );
}

.gallery .controls .buttons.active{
    background:rgb(26, 24, 148);
    color:#fff;
}

.gallery .image-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.gallery .image-container .image{
    height:370px;
    width: 350px;
    overflow: hidden;
    border:15px solid #fff;
    box-shadow: 0 3px 5px rgba(0,0,0,.3);
    margin: 20px;
    border-radius: 15px;
    perspective: 800px;
}

.gallery .image-container .image img{
    height: 100%;
    width:100%;
    object-fit: cover;
    transform: rotateY(0deg);
}

.gallery .image-container .image:hover img{
   /*  transform: rotate(5deg) scale(1.1); */
   transform: rotateY(360deg) scale(0.9) ;
   transition: all 0.3s ease-in-out;
   box-shadow: 0 6px 5px rgba(0,0,0,.3);
}