main.css

 .main {
    width: 70%;
    height: 100%;
    background-color: lightgray;
}

 
  
  .card {
    background-color: lightblue;
    max-width: 230px;
    min-width: 200px;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

  }

  .card h5{
    margin: 1px;

  }

  .card h2{
    margin-bottom: 10px;

  }

  .card .comments {
      align-self: stretch;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
  }

.card img {
    width: 95%;
    height: 50%;
    transition: all .5s;
}

  .card img:hover {
    transform: scale(1.5); 
    transition: all .5s;
  }

  .comments {
      padding-right: 5px;
      padding-bottom: 2px;
  }

  .rating {
      padding-left: 5px;
      padding-bottom: 2px; 
  }

  .cards-container {
      flex-wrap: wrap;
      display: grid;
      grid-template-columns: repeat(auto-fill, 230px);
      grid-column-gap: 10px;
      grid-row-gap: 20px;
      justify-content: space-between;

  }