/* BODY BG COLOR *************************************/
/*****************************************************/
body {
  background-color: #FFFFFF;
}



/* HEADER ********************************************/
/*****************************************************/

header {
  background-color: #FFFFFF;
}

header .nav-bar {
  box-sizing: border-box;
}



/* MAIN **********************************************/
/*****************************************************/

main .grid-container {
  box-sizing: border-box;
  row-gap: 0;
}

main .intro-wrapper > h1 {
  grid-column: 2/8;
  text-align: left;
}

main .post-container-top {
  border-top: 1px solid #C4C4C4;
}

main .post-container {
  grid-column: 1/13;
  height: 25em;
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #C4C4C4;
}

/* main .post-container:after {
  display: block;
  width: 80%;
  margin: -1px auto;
  border-bottom: 1px solid #C4C4C4;
  content: "";
} */

main .post-thumbnail {
  position: absolute;
  height: 100%;
  width: calc(100% + 4em);
  object-fit: cover;
  z-index: -1;
  filter: opacity(0);
  -webkit-transition: filter .5s ease-in-out;
  transition: filter .5s ease-in-out;
}

main .post-container:hover .post-thumbnail {
  filter: opacity(1);
}

main .post-wrapper {
  margin: 0 auto;
}

main .post-wrapper > h2, h6 {
  color: #25292E;
  -webkit-transition: color .5s ease-in-out;
  transition: color .5s ease-in-out;
}

main .post-container:hover .post-wrapper > h2 {
  color: #FAF7F2;
}

main .post-container:hover .post-wrapper > h6 {
  color: #FAF7F2;
}


main .post-category {
  display: inline-block;
  border-radius: 25px;
  background-color: #FAF7F2;
  padding: 0.5em 1em;
}

main .post-title {
  margin: 0.8em 0;
}

main .post-date {
  margin: 0;
}

main .top-container{
  box-sizing: border-box;
}



/* RESPONSIVE SIZE ***********************************/
/*****************************************************/

/* > 1680 { columns: 12, margin: 32px, gutter: 16px } */
main .post-wrapper { width: 80%; }
main .post-container { margin: 0 -2em; }
main .post-thumbnail { margin: 0 -2em; }

/* < 1680 { columns: 12, margin: 32px, gutter: 16px } */
@media(max-width: 1679px) {
}

/* < 600 { columns: 12, margin: 16px, gutter: 0px } */
@media(max-width: 599px) {
  main .post-wrapper { width: 77%; }
  main .post-container { margin: 0 -1em;}
  main .post-thumbnail { margin: 0 0; top: 0; left: 0; width: 100%;}
}