/* Mobile first  */
.container {
  grid-template-areas:
    "nav"
    "us"
    "blog"
    "ft";
  grid-template-rows: 192px;
}
#blog-post {
  grid-area: blog;
  justify-items: center;
  justify-content: flex-start;
  padding: 10px;
}
#blog-image {
  width: 61%;
  float: left;
  margin-right: 10px;
}
#user-info {
  grid-area: us;
  padding: 20px 9px 9px 9px;
  border: 2px solid peru;
}
.card {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.card-info {
  padding: 2px 16px;
  align-items: center;
}
.about-me {
  text-align: center;
}
#avatar {
  transition: height 0.4s ease-out;
  height: 114px;
  border-radius: 74px;
}
/* Medium Screens*/
@media (min-width: 660px) and (max-width: 815px) {
  .container {
    grid-template-areas:
      "nav nav nav nav nav nav nav nav"
      "blog blog blog blog blog us us us"
      "blog blog blog blog blog us us us"
      "blog blog blog blog blog us us us"
      "blog blog blog blog blog us us us"
      "ft ft ft ft ft ft ft ft"
      "ft ft ft ft ft ft ft ft";
    grid-template-rows: 100px;
  }
  #blog-image {
    width: 300px;
  }
}
/* Medium to Large Screens*/
@media (min-width: 816px) and (max-width: 1100px) {
  .container {
    grid-template-areas:
      "nav nav nav nav nav nav nav nav"
      "blog blog blog blog blog blog us us"
      "blog blog blog blog blog blog us us"
      "blog blog blog blog blog blog us us"
      "blog blog blog blog blog blog us us"
      "ft ft ft ft ft ft ft ft"
      "ft ft ft ft ft ft ft ft";
    grid-template-rows: 100px 2fr 2fr 1fr 30px 170px 30px;
  }
  #blog-image {
    width: 61%;
  }
}
/* Larger Screens */
@media (min-width: 1101px) {
  .container {
    grid-template-areas:
      "nav nav nav nav nav nav nav nav"
      "blog blog blog blog blog blog us us"
      "blog blog blog blog blog blog us us"
      "blog blog blog blog blog blog us us"
      "blog blog blog blog blog blog us us"
      "ft ft ft ft ft ft ft ft"
      "ft ft ft ft ft ft ft ft";
    grid-template-columns: 300px 2fr 1fr;
    grid-template-rows: 100px 2fr 2fr 1fr 30px 170px 30px;
  }
  .card {
    max-width: 320px;
  }
  #blog-post {
    padding: 50px;
  }
  #blog-image {
    width: 61%;
  }
  #user-info {
    padding-top: 40px;
  }
  #avatar {
    height: 177px;
    border-radius: 104px;
  }
}