.personalities-teasers-list {
    display: flex;
    flex-flow: row wrap;
    --columns: 3;
    --margin: 50px;
    --item-width: calc((100% - (var(--item-gap) * var(--columns))) / var(--columns));
    --item-gap: var(--grid-gap);
    margin-bottom: calc(var(--margin) * -1);
    margin-right: calc(var(--item-gap) * -1);
  }
  
  .personalities-teasers-list > li {
    margin-bottom: var(--margin);
    width: var(--item-width);
    margin-right: var(--item-gap);
  }
  
  .personality-teaser-article {
    height: 100%;
    --slant-offset: 11px;
  }
  
  .personality-teaser-article a {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
  }
  
  .personality-teaser-article .name-wrap {
    margin-bottom: max(36px, calc(45 * var(--base-unit)));
    margin-top: -0.2em;
    padding-left: 20px;
    position: relative;
    z-index: 2;
  }
  
  .personality-teaser-article figure {
    position: relative;
  }
  
  .personality-teaser-article figure .slant {
    position: absolute;
    top: calc(100% + 2px);
    left: calc(var(--slant-offset) * -1);
    z-index: 2;
    width: calc(100% + var(--slant-offset));
    pointer-events: none;
    transform: translateY(-50%);
  }
  
  .personality-teaser-article figure .slant svg {
    width: 100%;
    height: auto;
  }
  
  .personality-teaser-article figure .slant svg path {
    fill: var(--base-color-light-yellow);
  }
  
  .personality-teaser-article .btn-set {
    margin-top: auto;
    padding-top: max(20px, calc(50 * var(--base-unit)));
  }
  
  
  
  
  
  @media (max-width: 900px) {
    
    .personalities-teasers-list {
      --columns: 2;
      --item-gap: var(--page-padding-left);
    }
    
    .personality-teaser-article figure {
      max-width: 250px;
    }
    
  }
  
  
  
  
  
  
  
  
  @media (max-width: 600px) {
    
    .personalities-teasers-list {
      --columns: 1;
    }
    
    .personality-teaser-article figure {
      max-width: 350px;
    }
    
  }