.root-fREBs {
  container: root / inline-size;

  /*
   Example values:
    --grid-gap: 20px;
    --item-min-width: 320px;
    --item-max-width: 480px;
  */
}/* Reusable auto-column grid */.grid-PoVrj {
  display: grid;
  grid-template-columns: repeat(
    /* Use as many columns as possible but leave a space if necessary */ auto-fill,
    /* Each column should be at least --item-min-width but less than the container width */
      minmax(min(100%, var(--item-min-width, 100%)), 1fr)
  );

  gap: var(--grid-gap, none);
  justify-items: center;
  container: grid / inline-size;
}.item-NF5qX {
  width: 100%;
  max-width: var(--item-max-width, none);
  grid-column: span 1;
  contain: content;
  container: grid-item / inline-size;
}.fullRow--PD0c {
  max-width: none;
  grid-column: 1 / -1;
}

.articleList-R10iq {

  /* Responsive Font Sizes */
  --title-font-size-min: 1rem;
  --title-font-size-max: 1.5rem;
  /* {max font size} / {ideal display width} * 100 => 1.5rem/400px * 100 = 6 */
  --title-font-size-fluid: 6cqw;

  --dek-font-size-min: 0.875rem;
  --dek-font-size-max: var(--dek-font-size-min);
  --dek-font-size-fluid: var(--dek-font-size-max);

  /* Grid config */
  --grid-gap: 40px 20px;
  --item-min-width: 320px;
  --item-max-width: 660px;

  /* - Begin actual styling - */

  width: var(--standard-width);
  max-width: var(--standard-max-width);
  margin: 20px auto 40px auto;

  --title-font-size: var(--title-font-size-min);
  /* - Configuration - */
}

@media screen and (min-width: 950px) {

.articleList-R10iq {
    --grid-gap: 60px 40px;

    --title-font-size: var(--title-font-size-max);
    --dek-font-size: var(--dek-font-size-max);
}
  }

/*
    Container query units are well-supported but not enough to rely solely on them.
    This is why we're using `@supports` to check for support before using them and
    falling back to the media query approach above.

    https://caniuse.com/css-container-query-units
  */

@supports (gap: 1cqw) {

.articleList-R10iq {
    /* 60px/1280px * 100 = 4.6875% */
    /* 40px/1280px * 100 = 3.125% */
    --grid-gap: max(40px, min(4.6875cqw, 60px)) max(20px, min(3.125cqw, 40px));

    /* Our goal here is to have font size scale optically perfectly with its container's width. */
    --title-font-size: max(var(--title-font-size-min), min(var(--title-font-size-fluid), var(--title-font-size-max)));

    --dek-font-size: max(var(--dek-font-size-min), min(var(--dek-font-size-fluid), var(--dek-font-size-max)));
}
  }

.articleListGrid-N4wvY {
}

.article-pFLe7 {
}

/* .article.isDarkMode variant */
/* - overwrite text color to white on all elements */
.article-pFLe7.isDarkMode-fxRXU * {
    color: var(--color-white);
  }
/* embolden `.meta` class */
.article-pFLe7.isDarkMode-fxRXU .meta-RJMPT {
    font-weight: bold;
  }
/* remove dotted bottom border in this variant */
.article-pFLe7.isDarkMode-fxRXU::after {
    display: none;
  }

.articleFigure-Q7l9w {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  padding-bottom: var(--ratio, 56.25%);
  margin: 0 0 10px 0;
  background: #eee;
  position: relative;
}

.articleImg-Ls3LK {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;

  /* Keeps white background image from looking weird */
  outline: 1px solid rgba(0, 0, 0, 0.05);
}

.articleLink-2OMNo {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: black;
}

.meta-RJMPT {
  font-size: 10px;
  margin: 0;
  text-transform: uppercase;
  color: var(--color-medium-gray);
  line-height: 1;
  margin: 1.5em 0;
}

.metaCategory-l96EY {
  display: inline-block;
  margin-right: 4px;
  padding-right: 7px;
  border-right: 4px solid var(--color-blue);
  color: var(--color-black);
  font-weight: bold;
}

.articleTitle-mtY5p {
  --font-size: var(--title-font-size, 1rem);
  font-size: 1rem;
  font-size: var(--font-size);
  line-height: 1.1;
  margin: 0.25em 0;
  font-weight: 700;
  color: var(--color-black);
}

.dek-KweYs {
  --font-size: var(--dek-font-size, 0.875rem);
  font-size: 0.875rem;
  font-size: var(--font-size);
  font-family: var(--font-serif);
  margin: 10px 0;
}

.dek-KweYs p {
    margin: 0 0 0.5em 0;
  }

.dek-KweYs p:last-child {
    margin-bottom: 0;
  }

.authors-NCGt1 {
  color: var(--color-medium-gray);
  font-size: 11px;
  margin: 0;
  text-transform: uppercase;
}

.articleMedia-5BcQK {
  margin-top: 1rem;
}

.ad-I2Hlv {

  /* remove margin introduced by ad injector */
  --margin: 0 auto;
  min-height: 200px;
}