.view-pieces {
  container: view-row-container / inline-size;
}

.view-list-piece {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "hero"
    "title"
    "summary";
}

.view-list--title a {
  padding-inline: 0;
}

.view-list--summary {
  line-height: var(--lh);
}


@container view-row-container (min-width: 27rem) {

  .view-list-piece {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "hero title"
      "hero summary";
    column-gap: var(--spc);      
  }

}

.view-list-row,
.view-list-piece
 {
  margin-block-start: var(--spc);
  border-block-start: 1px solid var(--grey-xlt);
  padding-block-start: var(--spc);
}
.view-list-row:last-child,
.view-list-piece:last-child {
  padding-block-end: var(--spc);
  border-block-end: 1px solid var(--grey-xlt);
  margin-block-end: var(--spc);
}

.view-list--hero-image {
  grid-area: hero;
}
.view-list--hero-image img {
  width: 100cqi;
  height: auto;
}
h3.view-list--title {
  grid-area: title;
  margin-block-start: 0;
  margin-block-end: var(--spc);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.view-list--summary {
  grid-area: summary;
}

.view-article-author .view-content div {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.view-article-author img {
  border-radius: 50%;
} 
.view-article-author .author-name {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-block: var(--spc-sm);
}