Create body and main general layout

[car2t]

I have added all my CSS code at the end with comments.

I have to comment @media because it has fix sizes to avoid those fix sizes to interfere with general layout for body and main. Probably some fix sizes still interfering...not sure.

Cards container has a minimum height to be accurate with mobile layout as well.

I hope it is understandable. This all of it

body {
  min-height: 100vh;
  display: grid;
  /* Create 2 rows, 
  auto makes the footer stick at the end and 
  main occupies the remaining space */
  grid-template-rows: 1fr auto;
  /* Create 3 columns, the middle one with our web app,
  min width of 375 px and max width of 1440px */
  grid-template-columns: 1fr minmax(375px, 1440px) 1fr;
  /* The same as
  align-content: space-between; and
  justify-content: center; */
  place-content: space-between center;
}

body>main {
  grid-row: 1 / 2;
  grid-column: 2 /3;
}

body>footer {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

main {
  display: flex;
  flex-flow: row wrap;
}

main section#gradient-bg {
  min-height: 240px;
  /* Section containing cards grows till max-width of 33.33% = 1/3*100*/
  flex-grow: 1;
}

main section#form-bg {
  /* Section containing form grows till max-width of 66.66% = 2/3*100*/  
  flex-grow: 2;
}