/* @TODO: figure out how the 4-5 different types of ads will share which styles */

.ad-G8iDN {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Never allow ads to create horizontal scroll */
  max-width: 100%;
  overflow: hidden;
}

.ad-G8iDN.is-loaded {
  color: var(--color-dark-gray);
  background: var(--ad-background-color, var(--color-light-gray));
  padding: 20px 0 40px 0;
  margin: 20px auto;
  margin: var(--margin, 20px auto);
  overflow: hidden;
}

/**
 * Custom Sizes (AMP-style) ads are setting inline styles (boo)
 * and breaking the layout. Set this on a container instead.
 */
.breakoutContainer-8fsaw {
  /**
   * Container breaking trick
   * 1. Be the width of the screen
   * 2. Position relative pushes it 50% the width of the screen over
   * 3. TranslateX pulls in 50% the width of the element back
   * 4. We're full-width now. Profit!
   */

  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  clear: both;
}

.ad-G8iDN.is-loaded::before {
  content: "Advertisement";
  font-family: var(--font-sans);
  display: block;
  height: 20px;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/**
 * During a reload (e.g., resized the browser
 * The gray loaded styling will vanish for a split second
 * but the creative persists.
 */
.ad-G8iDN:not(.is-loaded) > * {
  display: none;
}

@media print {
  .breakoutContainer-8fsaw {
    display: none;
  }
}
/* Reusable auto-column grid */.grid-PoVrj {
  --item-min-width: 320px;
  --item-max-width: 480px;
  --gap: 20px;

  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(--gap);
  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 {

  /* Override grid defaults */
  --item-min-width: 320px;
  --item-max-width: 600px;
  --gap: 40px 20px;

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

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

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

/* Container-powered gap */

@supports (gap: 1cqw) {

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

.article-pFLe7 {

  border-bottom: 1px dotted var(--gray-1);
}

.articleFigure-Q7l9w {
  width: 100%;
  height: 0;
  padding-bottom: 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: 1rem;
  line-height: 1.1;
  margin: 0.25em 0;
  font-weight: 700;
  color: var(--color-black);
}

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

.articleTitle-mtY5p {
    font-size: 1.5rem;
}
  }

@supports (font-size: 1cqw) {

.articleTitle-mtY5p {
    font-size: max(1rem, min(6.667cqw, 1.5rem));
}
  }

.dek-KweYs {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  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;
}

.ad-I2Hlv {;

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