ul.article-list {
    line-height: 1.3;
}

li.article-container {
    container-name: article-list-item;
    container-type: inline-size;
    list-style: none;
}

ul.article-list {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

ul.article-list article {
    max-height: 15vh;

    background-size: 20vw auto;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-origin: border-box;
    padding-left: 3em;

    width: 100%;
}

ul.article-list h2 {
   filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75));
   font-weight: var(--font-weight-headline-bold) !important;
   font-family: var(--font-family-headline) !important;
}

ul.article-list article * {
    display: inline-grid;
}

@container article (inline-size > 500px) {
  /* Styles for horizontal article */
  ul.article-list article {
    /* grid-template-columns: 1fr 2fr; */
  }
}

@container article (inline-size > 800px) {
  ul.article-list article {
    /* Styles for article in a large space (e.g. featured article) */
    /* grid-template-columns: 1fr 1fr;
    gap: 2rem;
    font-size: 1.2rem; */
  }

  ul.article-list h2 {
    /* font-size: 2rem; */
  }
}