.cpg-grid {
  display: grid;
  gap: 24px;
  margin: 40px 0;
  max-height: 900px; 
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Layout until 1020px */
@media (min-width: 1021px) {
  .cpg-grid {
           grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(2, 1fr);

    /* grid-template-areas:
      "large-card large-card"
      "small-card-1 small-card-2"
      "small-card-3 small-card-4"
      "small-card-5 small-card-6";
  } */

  /* .cpg-card:nth-child(1) { grid-area: large-card; }
  .cpg-card:nth-child(2) { grid-area: small-card-1; }
  .cpg-card:nth-child(3) { grid-area: small-card-2; }
  .cpg-card:nth-child(4) { grid-area: small-card-3; }
  .cpg-card:nth-child(5) { grid-area: small-card-4; }
  .cpg-card:nth-child(6) { grid-area: small-card-5; }
  .cpg-card:nth-child(7) { grid-area: small-card-6; } */

  .cpg-card:nth-child(1) { grid-column: 1 / span 4; grid-row: 1 / span 2; }
  .cpg-card:nth-child(2) { grid-column: 5/span 2; grid-row: 1 / span 1; }
  .cpg-card:nth-child(3) { grid-column: 7 / span 2; grid-row: 1 / span 1; }
  .cpg-card:nth-child(4) { grid-column: 9 / span 2; grid-row: 1 / span 1; }
  .cpg-card:nth-child(5) { grid-column: 5 / span 2; grid-row: 2 / span 1; }
  .cpg-card:nth-child(6) { grid-column: 7 / span 4; grid-row: 2 / span 1; }

  }
  
}


.cpg-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.cpg-thumbnail img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.cpg-content {
    padding: 16px;
}

.cpg-content h3 {
    margin: 0 0 8px;
    line-height: 30px; 
}

.cpg-content h3 a {
    font-size: 21px;
    line-height: normal; 
    color: #222;
    text-decoration: none;
}

.cpg-content h3 a:hover {
    text-decoration: underline;
}

.cpg-date {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
}

.cpg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.cpg-tag {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #333;
    background: #eee;
    text-transform: lowercase;
}

/* Optional category color variants */
.cpg-tag:nth-child(odd) {
    background: #E0F7FA;
    color: #006064;
}

.cpg-tag:nth-child(even) {
    background: #FFE0B2;
    color: #E65100;
}