inspin.io/assets/style/pages/article/post.css

.post {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem 1rem;

  .hero {
    display: grid;
    grid-template-columns: calc(100% - 36rem) 36rem;
    width: 100%;

    .meta {
      padding: 2rem 2rem 0 .3rem;

      p {
        color: var(--f-color);
        font-size: .9rem;
        font-weight: 300;
        padding: 0;
        margin: 0;

        b {
          font-weight: 700;
        }
      }

      .author,
      .date {
        margin: 0 0 1.5rem 0;
      }

      .tags {
        display: inline-block;
        margin: .5rem .75rem 0 0;

        &:not(:last-child):after {
          position: relative;
          content: ',';
          font-size: .9rem;
          padding: 0 .1rem;
          top: -.05rem;
        }
      }
    }

    .head {
      padding: 1.65rem 0 1rem 0;

      h2 {
        font-size: 2.25rem;
        font-weight: 700;
        line-height: 2.75rem;
        letter-spacing: -.05rem;
        margin: 0;
      }
  
      p {
        display: block;
        font-size: 1.25rem;
        font-weight: 300;
        line-height: 1.75rem;
        padding: 1.5rem 0 2.5rem 0;
        margin: 0;
      }
  
      img {
        width: 100%;
        border: .15rem solid var(--w-color);
      }
    }
  }

  .content {
    display: grid;
    grid-template-columns: calc(100% - 36rem) 36rem;
    width: 100%;

    h3,
    h4,
    h5,
    h6 {
      margin: 0;
      a { font-weight: 600 }
    }

    h3 {
      padding: 2.5rem 0 .5rem 0;
      a { font-size: 1.75rem }
    }

    h4 {
      padding: 1.5rem 0 0 0;
      a { font-size: 1.5rem }
    }

    p {
      display: block;
      font-size: 1.25rem;
      font-weight: 300;
      line-height: 2rem;
      padding: .75rem 0;
      margin: 0;

      a {
        color: var(--l-color);
      }

      em {
        display: block;
        font-size: .9rem;
        padding: 0 0 1rem 0;
        text-align: center;
      }

      strong {
        display: block;
        font-size: 1.5rem;
        font-weight: 300;
        line-height: 2rem;
        padding: 5.5rem 4rem .5rem 4rem;

        &:before,
        &:after {
          content: '"';
          font-size: 1.75rem;
          padding: 0 .25rem;
        }
      }
    }

    .list {
      padding: 1rem 0 1rem 2rem;
  
      li {
        color: var(--f-color);
        font-family: var(--p-font);
        font-size: 1.15rem;
        font-weight: 300;
        line-height: 1.85rem;
        padding: 0 .5rem;
      }
    }

    .from {
      padding: 0 4rem 6rem 0;
      text-align: right;

      &:before {
        content: '~';
        font-size: 1.25rem;
        padding: 0 .25rem;
      }
    }

    img {
      width: 100%;
      padding: 1.25rem 0;
    }
  }
}

@media only screen and (--viewport-4) {
  .post {
    padding: 2rem 2.25rem;
  
    .hero,
    .content {
      display: block;
    }

    .hero .head {
      padding: 0 0 1rem 0;

      h2 {
        font-size: 1.75rem;
        line-height: 2.25rem;
      }
    }
  }
}