/* Color Customizer
/* ---------------------------------------------------------- */

article a{
  color: red;
  text-decoration: underline;
}

/*
/* ---------------------------------------------------------- */

aside{
    flex-basis:100%;
}

.sidebar{
    width:100%;
    margin: 0 auto;
}

.container-page, .container-page-wide{
  padding: 0 22px;
}

.post-title{
  text-align: center;
  padding: 0 22px;
  margin-bottom: 22px;
}

.avatar{
  width:35px;
  height:35px;
  border-radius:100%;
  margin-right:8px;
}

.author-meta{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: Euclid Circular B,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
}

.author-name{
  font-size:14px;
}

.avatar-post-footer{
  display: flex;
}
.avatar-img-container{
  margin-right: 15px;
}
.avatar-img-container img{
  width:84px;
  height:84px;
}
.bio{
  margin-top:8px;
}
.bio p{
  margin-top:8px;
  font-size:16px;
}
.contact-icons ul{
  display: flex;
  padding:0;
  margin:0;
}
.contact-icons ul li{
  list-style: none;
  margin-right: 16px;
}

/* 14. Media Query - Desktop
/* ---------------------------------------------------------- */

@media screen and (min-width: 1024px) {
  .container-page, .container-page-wide{
    margin:0 auto;
    padding-top:40px;
  }
  .container-page{
    max-width:700px;
  }
  .container-page-wide{
    max-width:1280px;
  }
  .post-header{
    display:flex;
    flex-direction: row;
    width:100%;
  }
  .post-title{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: flex-start;
    padding-left: calc((100% - 1140px) / 2)!important;
    width:640px;
    padding-right:60px;
    padding-left:0;
    margin-bottom: 0px;
  }
  .avatar{
    width:55px;
    height:55px;
  }
  .author-name{
    font-size:16px;
  }
  .header-img-wrapper{
    position: relative;
    object-fit: cover;
    width:50%;
    max-width:50%;
    height:420px;
  }
  .header-img-wrapper img{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    padding: 0;
    border: none;
    margin: auto;
    display: block;
    width: 0;
    height: 0;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
  }
}