body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 55vh;
    font-family: 'Roboto', sans-serif;
    background: WHITE;
    position-anchor: --now;
  }
  
  .container{
    width: 1000px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
    grid-gap: 15px;
    margin: 150px;

  }
  
  .card{
    position: relative;
    width: 350px;
    height: 400px;
    margin: 0 left;
    background: #fff;
    box-shadow: 0 15px 60px WHITE;
    border-radius: 15px;
  }
  
  .card .face{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .card .face.face1{
    box-sizing: border-box;
    padding: 20px;
  }
  
  .card .face.face1 h2{
    margin: 0;
    padding: 0;
  }
  
  .card .face.face1 .content{
    font-size:1.2em;
    margin:0;
    padding:0 0 1em 0;
    font-weight:500;
  }
  
  .card .face.face2{
    background: #285935;
    transition: 0.5s;
  }
  
  .card:nth-child(1) .face.face2{
    background: #285935;
    border-radius: 15px;
  }
  
  .card:nth-child(2) .face.face2{
    background: #285935;
    border-radius: 15px;
  }
  
  .card:nth-child(3) .face.face2{
    background: #285935;
    border-radius: 15px;
  }
  
    .card:nth-child(4) .face.face2{
      background: #285935;
      border-radius: 15px;
    }
    
    .card:nth-child(5) .face.face2{
      background: #285935;
      border-radius: 15px;
  }
  
    .card:nth-child(6) .face.face2{
      background: #285935;
      border-radius: 15px;
  }

    .card:nth-child(7) .face.face2{
      background: #285935;
      border-radius: 15px;
  }
  
    .card:nth-child(8) .face.face2{
      background: #285935;
      border-radius: 15px;
  }

    .card:nth-child(9) .face.face2{
      background: #285935;
      border-radius: 15px;
  }
  
    .card:nth-child(10) .face.face2{
      background: #285935;
      border-radius: 15px;
  }
  
    .card:nth-child(11) .face.face2{
      background: #285935;
      border-radius: 15px;
    }
    
    .card:nth-child(12) .face.face2{
      background: #285935;
      border-radius: 15px;
    }
    
    .card:nth-child(13) .face.face2{
      background: #285935;
      border-radius: 15px;
    }
    
      .card:nth-child(14) .face.face2{
        background: #285935;
        border-radius: 15px;
      }
      
      .card:nth-child(15) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
    
      .card:nth-child(16) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
  
      .card:nth-child(17) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
    
      .card:nth-child(18) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
  
      .card:nth-child(19) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
    
  .card:nth-child(20) .face.face2{
          background: #285935;
          border-radius: 15px;
    }
    
  .card:nth-child(21) .face.face2{
    background: #285935;
    border-radius: 15px;
  }
  
  .card:nth-child(22) .face.face2{
    background: #285935;
    border-radius: 15px;
  }
  
  .card:nth-child(23) .face.face2{
    background: #285935;
    border-radius: 15px;
  }
  
    .card:nth-child(24) .face.face2{
      background: #285935;
      border-radius: 15px;
    }
    
    .card:nth-child(25) .face.face2{
      background: #285935;
      border-radius: 15px;
  }
  
    .card:nth-child(26) .face.face2{
      background: #285935;
      border-radius: 15px;
  }

    .card:nth-child(27) .face.face2{
      background: #285935;
      border-radius: 15px;
  }
  
    .card:nth-child(28) .face.face2{
      background: #285935;
      border-radius: 15px;
  }

    .card:nth-child(29) .face.face2{
      background: #285935;
      border-radius: 15px;
  }
  
    .card:nth-child(30) .face.face2{
        background: #285935;
        border-radius: 15px;
  }
  
    .card:nth-child(31) .face.face2{
        background: #285935;
        border-radius: 15px;
  }  
  
  .card:nth-child(32) .face.face2{
    background: #285935;
    border-radius: 15px;
  }
  
  .card:nth-child(33) .face.face2{
    background: #285935;
    border-radius: 15px;
  }
  
    .card:nth-child(34) .face.face2{
      background: #285935;
      border-radius: 15px;
    }
    
    .card:nth-child(35) .face.face2{
      background: #285935;
      border-radius: 15px;
  }
  
    .card:nth-child(36) .face.face2{
      background: #285935;
      border-radius: 15px;
  }

    .card:nth-child(37) .face.face2{
      background: #285935;
      border-radius: 15px;
  }
  
    .card:nth-child(38) .face.face2{
      background: #285935;
      border-radius: 15px;
  }

    .card:nth-child(39) .face.face2{
      background: #285935;
      border-radius: 15px;
  }
  
    .card:nth-child(40) .face.face2{
        background: #285935;
        border-radius: 15px;
  }
  
      .card:nth-child(41) .face.face2{
          background: #285935;
          border-radius: 15px;
    }  
    
  
    .card:nth-child(42) .face.face2{
      background: #285935;
      border-radius: 15px;
    }
    
    .card:nth-child(43) .face.face2{
      background: #285935;
      border-radius: 15px;
    }
    
      .card:nth-child(44) .face.face2{
        background: #285935;
        border-radius: 15px;
      }
      
      .card:nth-child(45) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
    
      .card:nth-child(46) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
  
      .card:nth-child(47) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
    
      .card:nth-child(48) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
  
      .card:nth-child(49) .face.face2{
        background: #28s5935;
        border-radius: 15px;
    }
    
      .card:nth-child(50) .face.face2{
          background: #285935;
          border-radius: 15px;
  }
  
      .card:nth-child(51) .face.face2{
          background: #285935;
          border-radius: 15px;
    }  
    
  
    .card:nth-child(52) .face.face2{
      background: #285935;
      border-radius: 15px;
    }
    
    .card:nth-child(53) .face.face2{
      background: #285935;
      border-radius: 15px;
    }
    
      .card:nth-child(54) .face.face2{
        background: #285935;
        border-radius: 15px;
      }
      
      .card:nth-child(55) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
    
      .card:nth-child(56) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
  
      .card:nth-child(57) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
    
      .card:nth-child(58) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
  
      .card:nth-child(59) .face.face2{
        background: #285935;
        border-radius: 15px;
    }
    
      .card:nth-child(60) .face.face2{
          background: #285935;
          border-radius: 15px;
  } 
  
        .card:nth-child(61) .face.face2{
            background: #285935;
            border-radius: 15px;
      }  
      
    
      .card:nth-child(62) .face.face2{
        background: #285935;
        border-radius: 15px;
      }
      
      .card:nth-child(63) .face.face2{
        background: #285935;
        border-radius: 15px;
      }
      
        .card:nth-child(64) .face.face2{
          background: #285935;
          border-radius: 15px;
        }
        
        .card:nth-child(65) .face.face2{
          background: #285935;
          border-radius: 15px;
      }
      
        .card:nth-child(66) .face.face2{
          background: #285935;
          border-radius: 15px;
      }
    
        .card:nth-child(67) .face.face2{
          background: #285935;
          border-radius: 15px;
      }
      
        .card:nth-child(68) .face.face2{
          background: #285935;
          border-radius: 15px;
      }
    
        .card:nth-child(69) .face.face2{
          background: #285935;
          border-radius: 15px;
      }
      
        .card:nth-child(70) .face.face2{
            background: #285935;
            border-radius: 15px;
  } 
  
        .card:nth-child(71) .face.face2{
            background: #285935;
            border-radius: 15px;
      }  
      
    
      .card:nth-child(72) .face.face2{
        background: #285935;
        border-radius: 15px;
      }
      
      .card:nth-child(73) .face.face2{
        background: #285935;
        border-radius: 15px;
      }
      
        .card:nth-child(74) .face.face2{
          background: #285935;
          border-radius: 15px;
        }
        
        .card:nth-child(75) .face.face2{
          background: #285935;
          border-radius: 15px;
      }
      
        .card:nth-child(76) .face.face2{
          background: #285935;
          border-radius: 15px;
      }
    
        .card:nth-child(77) .face.face2{
          background: #285935;
          border-radius: 15px;
      }
      
        .card:nth-child(78) .face.face2{
          background: #285935;
          border-radius: 15px;
      }
    
        .card:nth-child(79) .face.face2{
          background: #285935;
          border-radius: 15px;
      }
      
        .card:nth-child(80) .face.face2{
            background: #285935;
            border-radius: 15px;
  } 
  
          .card:nth-child(81) .face.face2{
              background: #285935;
              border-radius: 15px;
        }  
        
      
        .card:nth-child(82) .face.face2{
          background: #285935;
          border-radius: 15px;
        }
        
        .card:nth-child(83) .face.face2{
          background: #285935;
          border-radius: 15px;
        }
        
          .card:nth-child(84) .face.face2{
            background: #285935;
            border-radius: 15px;
          }
          
          .card:nth-child(85) .face.face2{
            background: #285935;
            border-radius: 15px;
        }
        
          .card:nth-child(86) .face.face2{
            background: #285935;
            border-radius: 15px;
        }
      
          .card:nth-child(87) .face.face2{
            background: #285935;
            border-radius: 15px;
        }
        
          .card:nth-child(88) .face.face2{
            background: #285935;
            border-radius: 15px;
        }
      
          .card:nth-child(89) .face.face2{
            background: #285935;
            border-radius: 15px;
        }
        
          .card:nth-child(90) .face.face2{
              background: #285935;
              border-radius: 15px;
  } 
  
          .card:nth-child(91) .face.face2{
              background: #285935;
              border-radius: 15px;
        }  
        
      
        .card:nth-child(92) .face.face2{
          background: #285935;
          border-radius: 15px;
        }
        
        .card:nth-child(93) .face.face2{
          background: #285935;
          border-radius: 15px;
        }
        
          .card:nth-child(94) .face.face2{
            background: #285935;
            border-radius: 15px;
          }
          
          .card:nth-child(95) .face.face2{
            background: #285935;
            border-radius: 15px;
        }
        
          .card:nth-child(96) .face.face2{
            background: #285935;
            border-radius: 15px;
        }
      
          .card:nth-child(97) .face.face2{
            background: #285935;
            border-radius: 15px;
        }
        
          .card:nth-child(98) .face.face2{
            background: #285935;
            border-radius: 15px;
        }
      
          .card:nth-child(99) .face.face2{
            background: #285935;
            border-radius: 15px;
        }
        
          .card:nth-child(100) .face.face2{
              background: #285935;
              border-radius: 15px;
  } 
  


  
  
  .card:hover .face.face2{
    height: 60px;
    border-radius: 0 0 15px 15px;
    
  }
  
  .card .face.face2:before{
    content:'';
    position: absolute;
    top:0;
    left:0;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255, 0.1);
    border-radius: 15px 0 0 15px;
  }
  
  .card .face.face2 h2{
    margin: 0;
    padding: 0;
    font-size: 10em;
    color: #fff;
    transition: 0.5s;
    text-shadow: 0 2px 5px rgba(0,0,0, .2);
    
  }
  
  .card:hover .face.face2 h2{
    font-size: 2em;
    
  }