.post-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 15px;
}

.post-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* Large card takes 2 rows in desktop */
.post-card-large {
  grid-row: span 2;
}

.post-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  position: absolute;
  inset: 0; /* shorthand: top:0; right:0; bottom:0; left:0 */
  padding: 15px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* keep text at bottom */
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

/* Tablet layout (1100px): stack into 2 columns */
@media (max-width: 1100px) {
  .post-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  /* Reset large card so it doesn’t force spanning */
  .post-card-large {
    grid-row: auto;
    grid-column: span 2; /* make it full-width on top */
  }
}

/* Mobile layout (≤768px): single column */
@media (max-width: 768px) {
  .post-grid {
    grid-template-columns: 1fr;
  }

  .post-card-large {
    grid-column: auto;
  }
}