.main {
  grid-area: main;
  justify-content: center;
  padding: 50px 150px;
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "heading" "favs"; }
  .main .heading {
    grid-area: heading;
    font-weight: bold;
    font-size: 2.5em;
    text-align: center; }
  .main .favs {
    grid-area: favs;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 30px; }
    .main .favs .card {
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s; }
      .main .favs .card .beer-img {
        width: 180px;
        height: 180px; }
      .main .favs .card .info {
        padding-top: 4px;
        text-align: center; }
        .main .favs .card .info h4 {
          padding-bottom: 15px;
          font-weight: bold;
          font-size: 1.2em;
          text-align: left; }
      .main .favs .card:hover {
        box-shadow: 0 8px 16px 0 rgba(60, 219, 211, 0.5); }
    .main .favs button {
      text-align: center;
      margin-top: 10px;
      color: red;
      font-weight: 600;
      border: none;
      border-radius: 5px;
      margin-bottom: 5px; }
      .main .favs button:hover {
        box-shadow: 0 3px 6px 0 rgba(220, 0, 0, 0.7);
        color: black; }