.results-heading{
    max-width: 600px;
    margin-left: 100px;
  }
  
  .results-cards {
    display: grid;
    grid-template-columns: auto auto;
    gap: 100px;
    justify-content: center;
    margin: auto;
    max-width: 650px;
  }
  
  .card {
    position: relative;
    width: 300px;
    height: 500px;
    perspective: 1000px;
  }
  
  /* Cards for DB results (no images) */
  .results-cards-text {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 100px;
    justify-content: center;
    margin: 100px;
  }
  

  /* All cards! */
  
   .results-cards h2{
    text-align: center;
   }
  
   body {
    background: #E5DED2;
  }
  
  
  .content {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
  
    transition: transform 1s;
    transform-style: preserve-3d;
  }
  
  .card:hover .content {
    transform: rotateY( 180deg ) ;
    transition: transform 0.5s;
  }
  
  .front, .back {
    padding: 20px;
    position: absolute;
    height: 100%;
    width: 100%;
    background: white;
    border-radius: 5px;
    backface-visibility: hidden;
  }
  
  .front-text{
    text-align: left;
  }
  
  .back {
    text-align: left;
    background: #613E31;
    color: white;
    transform: rotateY( 180deg );
  }
  
  .fourteen-front {
    background-color: #E6E8A7;
    border: #5E5E3D;
  }
  
  .fourteen-back {
    background-color: #5E5E3D;
  }
  
  .fifteen-front {
    background-color: #E8DAA7;
    border: #5E553D;
  }
  
  .fifteen-back {
    background-color: #5E553D;
  }
  
  .sixteen-front {
    background-color: #E8BEA7;
    border: #5E423D;
  }
  
  .sixteen-back {
    background-color: #5E423D;
  }

  .eighteen-front {
    background-color: #E8A7A7;
    border: #5E3D3D;
  }
  
  .eighteen-back {
    background-color: #5E3D3D;
  }

  .gen-front {
    background-color: #B2E7A6;
    border: #445F3E;
  }
  
  .gen-back {
    background-color: #445F3E;
  }
  
  .front {
    text-align: center;
    border-style: solid;
  }