.Comment {
  $avatarSize: 50px;

  display: grid;
  grid-template-columns: $avatarSize auto 150px;
  grid-template-rows: 26px auto;
  column-gap: 10px;
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dfdfdf;

  .avatar {
    display: block;
    grid-column: 1 / span 1;
    grid-row: 1 / span 2;
    align-self: start;

    a {
      width: $avatarSize;
      height: $avatarSize;
      display: block;
      border-radius: $avatarSize / 2;
      overflow: hidden;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }

  .blogname {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    align-self: end;

    strong {
      margin-right: 5px;
    }
  }

  .date {
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
    justify-self: right;
  }

  .comment {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
  }

  .options {
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
    align-self: start;
  }
}