.container{
    perspective: 2000px;
  }
  
  .civilization{
    position: relative;
    transition: transform .5s;
    transform-style: preserve-3d;
    width: 500px;
    height: 500px;
    cursor: pointer;
  }
  
  .civilization.discover{
    transform: rotateY(180deg);
  }
  
  .civilization-image{
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
  }
  
  .civilization-content{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    transform: rotateY(180deg);
    backface-visibility: hidden;
  
  }