body {background: #212121;}

section { display: flex;
        justify-content: center;
        align-items: center;
        height: 95vh;
        width: 100%;

}


#card {
  width: 70%; 
  height: 400px; 
  border-radius: 4px;
  display: flex; 
  gap: 5px; 
  padding: .4em;
}

#card .card-item {
 height: 100%;
  background-size: cover; background-position: center;
  transition: all .5s; cursor: pointer; text-transform: uppercase;
  overflow: hidden; font-family: 'Poppins', sans-serif;
  text-decoration: none; 
filter: grayscale(100%);
    transition: all .5s;
    display:flex;
    justify-content:center;
    align-items: center;
    flex:1;
}


#card .card-item:hover { flex: 5; filter:none; }

#card .card-item span {
  transform: rotate(-90deg);
  letter-spacing: .1em; color: white; text-align: center; padding: .5em;
  transition: all .5s; min-width: 14em;
}
#card .card-item:hover span {
  transform: rotate(0);
  text-shadow: 0 0 15px #8FBC8F, 0 0 7px #FFF, 0 0 45px #8FBC8F;
}

#card .card-item:nth-child(1){ background-image: url(../images/20.png); }
#card .card-item:nth-child(2){ background-image: url(../images/12.png); }
#card .card-item:nth-child(3){ background-image: url(../images/02.png); }
#card .card-item:nth-child(4){ background-image: url(../images/10.png); }
#card .card-item:nth-child(5){ background-image: url(../images/06.png); }
#card .card-item:nth-child(6){ background-image: url(../images/01.png); }