article.post {
    max-width: 680px;
    margin: 0 auto;
    padding: 3vh 0 0 0;}

    @media screen and (max-width: 900px){
        article.post {
            padding: 2vh 18px 135px 18px;}}

            article.post header {}

                article.post header .header-image {}

                    article.post header .header-image > img {
                        width: 100%;}

                article.post header .meta {
                    padding-bottom: 20px;}


article.post h1 {
    font-family: 'Playfair Display', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 32pt;
    color: #2e221d;
    line-height: 42pt;
    font-weight: 900;}

    @media screen and (max-width: 1300px) {
        article.post h1 {
            line-height: 30pt;
            font-weight: 900;
            font-size: 22pt;}}

article.post h2 {
    font-weight: 600;
    font-size: 20pt;
    color: #303030;}
    
    @media only screen and (max-width : 900px) {
        article.post h2 {
        font-size: 16pt;}} 
    
    
article.post h3 {
    font-size: 15pt;
    line-height: 1.5;
    font-weight: 400;
    color: #2e221d;}
    
    @media only screen and (max-width : 900px) {
        article.post h3 {
        font-size: 14pt;
        font-weight: 400;}} 


.post-content {}

    .post-content > .post-excerpt,
    .post-content > .post-body {
        text-align: left;
        font-size: 12pt;
        line-height: 1.8;}

   


.image-container {
  background-color: #fafafa;
  width: 100% !important;
  padding: 16px;}

.social-share {
    display: flex; 
    align-items: center;}

    .social-share > h3.text-alpha {
        margin: 0;}

    .social-share > a {
        display: flex;}

        .social-share > a > img {
            max-width: 35px;}

    


.post-nav {
  max-width: 680px;
  margin: 32px auto;
  padding: 32px 0 64px 0;}

  .post-nav > .post-nav-wrapper {
      display: flex;
      justify-content: space-between;}

      @media screen and (max-width: 900px){
          .post-nav > .post-nav-wrapper {
              padding: 0 5vw;}}


.post-nav .link {
  position: relative;
  display: block;
  flex: 1;
  padding-top: 20px;
  padding-bottom: 20px;
  color: currentColor;
  text-decoration: none;
  max-width: 300px;}

  .post-nav .link:first-child {
      padding-right: 5vh;}

  .post-nav .link:last-child {
      padding-left: 5vh;}

  .post-nav .link > .link-wrapper {
      display: flex;
      flex-direction: column;}

      .post-nav .link:not(:last-child) > .link-wrapper {
          align-items: flex-start;}

      .post-nav .link:last-child > .link-wrapper {
          align-items: flex-end;}

  .post-nav .link > .link-wrapper:hover {
      opacity: 0.4;}

      .post-nav .link > .link-wrapper > .direction {
          text-transform: uppercase;
          color: #202020;
          font-weight: 700;
          padding-bottom: 16px;
          border-bottom: solid 1px #202020;
          font-size: 12pt;}

      .post-nav .link > .link-wrapper > .title {
          color: #404040;
          font-size: 12pt;
          padding-top: 16px;
          font-weight: 500;
          line-height: 18pt;}

  .post-nav .link:last-child {
      text-align: right;}