.masonry{
  transition: all .5s ease-in-out;
  column-gap: 30px;
  column-fill: initial;
  column-count: 3;
}
.masonry .brick{
  margin-bottom: 30px;
  display: inline-block;
  vertical-align: top;
}
@media (max-width: 426px) {
  .masonry 
  {
    column-count: 1;
  }
}
@media (min-width: 426px) and (max-width: 1024px) {
.masonry 
  {
    column-count: 2;
  }
}
.content {
    position: absolute;
    display: inline-block;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    color: #FFF;
    width: 100%;
    text-align: center;
    z-index: 999; 
}

.content1 {
    position: absolute;
    display: none;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    color: #FFF;
    width: 100%;
    text-align: center;
    z-index: 999;
 animation: fadeOut 2s forwards;
    animation-delay: 5s;
}
.playing:hover .content1 {
    position: absolute;
    display: inline-block;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    color: #FFF;
    width: 100%;
    text-align: center;
    z-index: 999;
content:"\F4C4";
animation: fadeOut 2s forwards;
    animation-delay: 5s;
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}


.play {
    font-size: 50px;
    cursor: pointer;
    border: 0px solid #FFF;
    display: inline-block;
    text-align: center;
    padding: 5px 25px;
}

.play:hover {
    color: #ffffff;
}