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

.post section.comments {
  display: grid;
  grid-template-columns: calc(100% - 36rem) 36rem;
  margin: 2rem 0;

  .comments,
  .policy,
  .success {
    grid-column: 2;
  }

  .comments {
    padding: 0 0 2rem 0;

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

    .comment {
      margin: 1.5rem .1rem;

      h5 {
        font-size: 1rem;
        font-weight: 600;
        padding: 0;
        margin: 0;
      }

      .name {
        display: inline-block;
        
        h5 {
          color: var(--l-color);

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .date {
        position: absolute;
        display: inline-block;
        color: var(--fs-color);
        font-size: .8rem;
        margin: .25rem .5rem 0 .35rem;

        span {
          padding: 0 .2rem 0 0;
        }
      }

      .text {
        font-size: 1.1rem;
        font-weight: 300;
        line-height: 1.75rem;
        margin: .25rem 0;
      }
    }
  }

  .policy {
    padding: 1.5rem 2rem;
    border: .15rem solid var(--hr-color);

    h3 {
      font-size: 1.25rem;
      font-weight: 600;
      margin: 0;
    }

    p {
      font-weight: 300;
    }

    ul {
      padding: 0 0 0 2rem;

      li {
        font-family: var(--p-font);
        font-size: 1rem;
        font-weight: 300;
      }
    }
  }

  form {
    grid-column: 2;
    grid-template-columns: repeat(3, 1fr);
    padding: 2rem 0;

    .textarea {
      grid-column: 1/4;
    }

    .hide {
      display: none;
    }

    button {
      grid-column: 1/4;
    }
  }

  .success {
    margin: 4rem 0;
    text-align: center;

    h3 {
      font-size: 1.25rem;
      font-weight: 600;
      margin: .5rem 0;
    }

    p {
      font-weight: 300;
    }
  }
}

@media only screen and (--viewport-4) {
  .post section.comments {
    display: block;
  }
}