.TetrisImageContainer{
  transition: all .25s;
  position: relative;
}



.TetrisPictureCaption {
  color: #f2f2f2;
  padding: 8px 12px;
  position: absolute;
  bottom: 20%;
  text-align: left;
  width: 100%;
}


@media (min-width: 600px) {
  .TetrisPictureCaption {
    bottom: 10%;
  }
  
}


@media (min-width: 900px) {

  .TetrisPictureText {
    position: absolute;
    top: 0%;
    /* left: 50%; */
    width: 100%;
    /* transform: translate(-50%, -50%); */
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 4% 10px 10px 10px;
    opacity: 0;
    border-radius: 20px;
    transition: all 0.3s ease;
  }
  
  .TetrisPicture {
    transition: all 0.25s ease;
  }


  .TetrisPictureCaption {
    color: #f2f2f2;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    text-align: left;
    width: 100%;
  }

  /* beim hovern vom container -> den text ändern */
  .TetrisImageContainer:hover .TetrisPictureText  {
    opacity: 1;
  }

  .TetrisImageContainer:hover .TetrisPicture  {
    transform: scale(1.08);
  }

}