/**
 * Wrapper
 
.wrapper {
  max-width: calc(#{$content-width} - (#{30px}));
  margin-right: auto;
  margin-left: auto;
  padding-right: 30px / 2;
  padding-left: 30px / 2;
  @extend %clearfix;

  @media screen and (min-width: $on-large) {
    max-width: calc(#{$content-width} - (#{30px} * 2));
    padding-right: 30px;
    padding-left: 30px;
  }
}*/

p, li {
  text-align: justify;
}

a {
  text-align: left;
}

/* posts-lists */
.posts-lists {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid #eee;

  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-areas: 
    ". posts-header ."
    ". posts-list .";
}

.posts-lists-header {
  text-align: center;
  grid-area: posts-header;
  margin-bottom: 1rem;
}

.posts-lists-posts {
  grid-area: posts-list;
  padding-left: 0;
  list-style: none;
}
.posts-lists-posts h3 {
  margin-top: 0;
}

.posts-lists-posts li {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 
    ". post-title ."
    ". post-image .";
  padding-top: 15px;
}

.posts-list-img-container {
  grid-area: post-image;
  margin: auto;
}

.posts-lists-posts li h3 {
  grid-area: post-title;
  text-align: center;
}

.posts-lists-posts li small {
  font-size: 75%;
  color: #999;
}
.posts-lists-posts li a:hover {
  color: #268bd2;
  text-decoration: none;
}
.posts-lists-posts li a:hover small {
  color: inherit;
}



/**
 * Site footer
 */

.footer {
  border-top: 1px solid #eee;

  left: 0;
  bottom: 0;
  height: 300px;
  width: 100%;
  overflow: hidden;
}

.footer-container {
  display: grid;
  padding-top: 15px;
  height: auto;
  width: 50%;
  margin: auto;
  grid-template-rows: 50px calc(100% - 50px);
  grid-template-columns: 100%;
  grid-gap: 20px;
  grid-template-areas: 
    "heading"
    "body";
}

.footer-heading {
  grid-area: heading;
  
}

.footer-body {
  grid-area: body;
  color: #828282;
  font-size: 15px;
  display: grid;
  grid-gap: 20px;

  grid-template-rows: repeat(3, 1fr);
    grid-template-columns: 1fr;
    grid-template-areas: 
      "left"
      "middle"
      "right";

  
}

@media (min-width: 800px){
  .footer-body {
    grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 
    "left middle right";
  }

  .footer {
    height: 150px;
  }
}

.footer-body-left {
  grid-area: left;
}
 
.footer-body-middle {
  grid-area: middle;
}

.footer-body-middle li {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
  height: auto;
}

.footer-body-middle ul {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

.footer-body-middle img {
  margin-right: 10px;
  border-radius: 5px;
  float: left;
}

.footer-body-right {
  grid-area: right;
}