.generic-articles-list {
    --margin: max(2rem, calc(100 * var(--base-unit)));
  }

  .generic-articles-list > li {
    display: block;
  }
  
  .generic-articles-list > li + li {
    margin-top: var(--margin);
  }
  
  article.generic-article.has-no-image {
    max-width: 840px;
    width: calc(840 * var(--base-unit));
  }
  
  article.generic-article.has-image {
    max-width: var(--grid-11-);
  }
  
  article.generic-article .headline {
    color: var(--base-color-blue);
  }
  
  article.generic-article .headline + .copy {
    margin-top: 1.5em;
  }
  
  article.generic-article .headline a:hover {
    text-decoration: underline;
  }
  
  article.generic-article .btn-set {
    margin-top: max(1rem, calc(40 * var(--base-unit)));
  }

  article.generic-article.has-image {
    display: flex;
    flex-flow: row nowrap;
  }
  
  article.generic-article.has-image figure {
    width: var(--grid-3);
    margin-right: auto;
  }
  
  article.generic-article.has-image .article-body {
    width: var(--grid-7);
  }
  
  
  
  .empty-state {
    padding-left: 2em;
    position: relative;
    max-width: var(--grid-7);
  }
  
  .empty-state .icon {
    position: absolute;
    left: 0;
    margin-top: -2px;
  }
  
  .empty-state .icon svg {
    width: 1.4em;
    height: auto;
  }
  
  
  
  
  
  
  @media (max-width: 1300px) {
    
    article.generic-article.has-no-image {
      max-width: 680px;
      width: auto;
    }
    
  }
  
  
  
  
  
  @media (max-width: 1200px) {
    
    .empty-state {
      max-width: 630px;
    }
    
  }