/* Tablet screens */

/* Header */
#header {
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  margin: 0 auto;
  padding: .5rem;
}

#header h1 { padding-left: 1rem; }

/* Intro Section */
#intro-container { height: 40vh; }

#intro-container .intro-content { max-width: 600px; }

/* Post Container */
#main-container { 
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#post-area { flex: 2; }

#post-area .post-list { grid-template-columns: repeat(2, 1fr); }

#post-area .post-list .post-card:first-child {
  grid-column: 1/3;
  grid-row: 1/2;
}

#post-area .post-list .post-card { justify-content: flex-start; }

/* Aside Container */
#aside-container { 
  flex: 1; 
  align-self: flex-start;
  margin: 4rem 0 0 1rem;
  min-height: 100%;
}

/* Sign Up Section */
#sign-up-bar { justify-content: center; }

#sign-up-bar .sign-up-group { 
  flex: 2;
  display: flex;  
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#sign-up-bar .sign-up-group input { margin: 0 1rem; }

/* Link Section */
#link-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

#link-container div { margin-bottom: .5rem; }

#link-container img {
  min-width: 200px;
  margin: 0 auto;
}

/* Blog Section */
#blog-container .blog-articles .blog-card .left {
  max-width: 60%;
  float: left;
  margin-right: 1rem;
}

#blog-container .blog-articles .blog-card .right {
  max-width: 60%;
  float: right;
  margin-left: 1rem;
}

#blog-container .blog-articles .blog-card p { padding: 0 .5rem .5rem .5rem; }

/* About Section */
#about-image-container .about-image img { width: 400px; }

/* Contact Section */
#contact { max-width: 500px; }