/* General responsive grid - Drupal has divitis in Resposive Grid mode in Views 8*/


/** Put this on the view itself to make it a grid (unformatted items) **/
.views--mdlsgrid {
  container: c-view-grid / inline-size;
}

.views--mdlsgrid .view-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spc);
  justify-content: stretch;
}

@container c-view-grid (min-width: 30rem) {

  .views--mdlsgrid .view-content {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    justify-items: start;
  }

}

/** Make a row a grid as needed as well, so that each views item can be a grid in itself (e.g. a card style) **/
.views--mdlsgrid__row--grid {
  display: grid;
  gap: 0;
  width: 100%;
}







/** Specific styles of View grids **/

.view-pieces {
  container: c-view-row / 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 c-view-row (min-width: 30rem) {

  .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-xsm);
}
.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);
}