.blog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 2.5rem;
      margin-top: 2rem;
  }

  .card-container {
      display: flex;
      flex-direction: column;
      /* 1. This creates a uniform gap between Title, Meta, and Body */
      gap: 0.618rem;
      padding: 40px;
      background: var(--bg-white);
      border-radius: var(--radius-lg);
      position: relative;
      /* Keep this for the stretched link */
      transition: all 0.3s ease;
      cursor: pointer;
  }

  /* 1. The Headline Link */
  .card-container h2 a {
      color: var(--text-main);
      text-decoration: none;
      /* We don't want the text itself to have a position: relative 
     because the ::after needs to find the .card-container */
  }

  .card-container h2 a::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      /* FORCE CLICKABILITY: */
      background-color: rgba(0, 0, 0, 0);
      /* Transparent but "solid" to the browser */
      z-index: 10;
      /* Must be higher than all other text/divs */
      display: block;
  }

  /* 2. Visual Link Fix */
  .card-container a:last-child {
      position: relative;
      /* Lower z-index than the 'before' pseudo-element so it doesn't block the click */
      z-index: 1;
      /* pointer-events: none ensures clicks go THROUGH the text to the main link */
      pointer-events: none;
  }

  /* 3. Hover state for the whole card */
  .card-container:hover {
      /* cursor: pointer; */
      border-color: var(--primary);
  }