article.comments {
}

article.comments > header{
    border-bottom: solid 1px #888;
    padding:5px 10px;
    font-size: 18px;
    margin-bottom: 10px;
}

article.comments ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

article.comments ul > li
{
    border-bottom: solid 1px #ccc;
    display: grid;
    width:100%;
    padding:10px;
    grid-template: 50px auto  auto auto / 50px auto 150px 100px ;
}

article.comments ul > li > img
{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: solid 3px #f00;
    grid-row: 1;
    grid-column: 1;
}

article.comments ul > li > strong
{
    grid-row: 1;
    grid-column: 2;
    padding: 15px 15px;
    font-size: 18px;
}

article.comments ul > li > p
{
    grid-row: 2;
    grid-column: 2;
    padding: 5px 25px;
    color:#000;
}
 

article.comments ul > li > span
{
    grid-row: 3;
    grid-column: 3;
    text-align: left;
    padding:  3px 
}

article.comments ul > li > button
{
    grid-row: 3;
    grid-column: 4;
    background: transparent;
    border: none;
    color:#00F;
}
 
article.comments ul > li > ol
{
    grid-row: 4;
    grid-column: 2 / 5;
    border-right: solid 5px #ccc;
    padding: 0
    
}
 
article.comments ul > li > ol > li
{
    list-style-type: none;
    border-bottom:   dashed 1px #ccc;
    display: grid;
    grid-template-columns: 50px 150px  auto 150px  ;
    grid-template-rows:   50px auto;
    padding:10px 0;
}
 
article.comments ul > li > ol > li > img
{
  width: 48px;
    height: 48px;
    border-radius: 50%;
}
 
article.comments ul > li > ol > li > strong
{
    grid-column: 2;
    padding: 15px;
}
 
article.comments ul > li > ol > li > p
{
    grid-column: 2 / 5;
    grid-row: 2;
}
 
article.comments ul > li > ol > li > span
{
    grid-column: 4;
    padding: 15px;
    padding: 15px;
}