The code I have used is to make logos black and white and show color on hover. But I got the feeling that there is something wrong with this code. Help would be greatly appriciated.
.section-border{opacity:0!important;}
.page-section, .section-background{background:transparent!important;}
.site-wrapper{background: linear-gradient(220deg, #CEC3FF, #cec3ff 10%, #ffffff 50%)!important;}
.list-item-content { margin-top:-58%; background:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0) 25%, 75%); padding: 1rem; transition: all 0.5s; z-index:99; opacity:0}
.list-item:hover .list-item-content { transition: all 1s; opacity:1}.list-item-content *{color:#FFF!important}
.list-item-media {transition: all 1s;filter:grayscale(1);}.list-item:hover .list-item-media {transition: all 1s;filter:grayscale(0)!important;}
@media only screen and(max-width:640px){ .list-item-content {
opacity:1!important;
margin-top:-60%; }
.list-item-media{ filter:grayscale(0)!important;}
.user-items-list-container {display: inline-block; margin: 0; float: left; display:flex; flex-direction: row; flex-wrap: nowrap; grid-auto-flow: column;}}