.hero {
   background-image: url("/images/hero/hero3.webp");
   min-height: 300px;
}

main {
   background: #272423;
   padding: 50px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 50px;
}

.card {
   background-color: #363331;
   color: #fff;
   display: grid;
   grid-template-columns: 200px 1fr;
   grid-template-rows: auto 1fr;
   box-shadow: 0 0 20px #0002;
   max-width: 750px;
   width: 100%;
   min-height: 300px;
   border-radius: 20px;

   div.imgContainer {
      padding: 20px;
      grid-row: 1 / span 2;
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
   }

   img {
      width: 150px;
      height: auto;
      border-radius: 10px;
   }

   h2 {
      /* text-align: center; */
      padding: 0 20px;
      margin: 20px 0;
      grid-row: 1;
      grid-column: 2;
   }

   p {
      padding: 0 20px;
      margin: 0;
   }

   div.buttons {
      display: flex;
      flex-direction: column;
      gap: 10px;
      justify-content: center;
      grid-column: 1;

      button {
         height: min-content;
         background-color: #7e3b21;
         color: #fff;
         font-size: inherit;
         padding: 10px;
         border-radius: 99px;
         border-style: none;
         width: 150px;
         &:hover {
            cursor: pointer;
         }
      }

      button.gh {
         background-color: #000;
      }
   }
}

@media screen and (max-width: 900px) {
   main {
      padding: 20px;
      gap: 20px;
   }

   .card {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;

      div.imgContainer {
      grid-row: 3;

         img {
            display: none;
         }
      }

      h2
      {
         grid-column: unset;
      }

      div.buttons {
         flex-direction: row;
         grid-row: 3;
         flex-wrap: wrap;

         button
         {
            flex: 1;
            width: unset;
         }
      }
   }
}