/* Reset global element styles *inside* the TWF embed
   without beating Tailwind utilities like .text-xl */
   :where(
    .twf-embed h1,
    .twf-embed h2,
    .twf-embed h3,
    .twf-embed h4,
    .twf-embed h5,
    .twf-embed h6,
    .twf-embed p,
    .twf-embed a
  ) {
    font-size: revert;
    line-height: revert;
    font-weight: revert;
    color: revert;
    text-decoration: revert;
    margin: revert;
  }
  
  /* Bigger, wider cards */
  .twf-card {
    border-radius: 16px;
    padding: 1.75rem;
    min-width: 180px;
    min-height: 150px;
  }
  
  /* Override the max-width from .icon-card in nyt.css */
  .twf-embed .icon-card {
    max-width: none;
  }
  
  /* Bigger titles inside the TWF cards */
  .twf-embed .twf-card-title {
    font-size: 2rem;   /* 2.2 * 10px = 22px */
    line-height: 2.8rem; /* 28px-ish line-height */
    font-weight: 600;
  }
  
  /* Control spacing between TWF cards */
  .twf-embed .twf-card-grid {
    display: grid;
    grid-gap: 1.5rem;     /* ~24px between cards on small screens */
  }
  
  @media (min-width: 768px) {
    .twf-embed .twf-card-grid {
      grid-gap: 2rem;     /* ~32px on larger screens */
    }
  }
  

  /* Bigger, wider cards */
  .twf-card {
    border-radius: 16px;
    padding: 1.75rem;
    width: 100%;
    height: 100%;
    /* optional: keep min-height if you want them taller */
    /* min-height: 15rem; */
    min-width: 0; /* explicitly allow shrinking inside the grid */
  }
  
  
  /* Override max-width: 12rem from .icon-card in nyt.css */
  .twf-embed .icon-card {
    max-width: none;
  }
  
  /* Bigger titles inside the TWF cards */
  .twf-embed .twf-card-title {
    font-size: 2.2rem;    /* with your 10px rem base, this ≈ 22px */
    line-height: 2.8rem;  /* ≈ 28px */
    font-weight: 600;
  }
  
  /* Consistent gaps between TWF cards */
  .twf-embed .twf-card-grid {
    display: grid;
    gap: 8px;
  }