gallery.component.css

*{
    box-sizing:border-box;
}

body{
    background-color: cornflowerblue;
}

h2{
    text-align:center;
}

.container{
    background-color: chartreuse;
    border: 2px solid black;
    /*width: 1200px;*/
    display: flex;
    justify-content: start;
}
.filterBox{
    text-align: left;
    background-color: blueviolet;
    width: 200px;
    max-width: 200px;
}

.gallery{
    vertical-align: top;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.card{
    width: 100%;
    background-color: rgb(78, 77, 148);
    margin: 10px;
    width: 200px !important;
    max-width: 200px !important;
    height: fit-content;
}

.card:hover{
    transition:all ease-in-out 0.2s;
    transform: scale(1.05, 1.05);
}

img{
    width: 100%;
    height: 100%;
}

.description{
    text-align:left;
    font-size:0.65em;
    padding:0;
    word-break: break-all;
}