.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  background-image: url("/sites/graduate.as.virginia.edu/files/2025-04/academical_village_amphitheater_aerial_ss_01.jpg");
  background-size: cover;
  background-position: center;
  padding: 40px;
}

/* Top left feature */
.feature {
  grid-column: span 9;
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 10px;
}

/* Top right stack of two */
.aside-stack {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aside-item {
  background: rgba(255, 255, 255, 0.85);
  padding: 15px;
  border-radius: 8px;
  flex: 1;
}

/* Bottom two below the 9-column feature only */
.aside-bottom.left {
  grid-column: 1 / span 4; /* Start at column 1, take up 4 columns */
}

.aside-bottom.right {
  grid-column: 5 / span 4; /* Skip a column between the two if desired */
}

.aside-bottom {
  background: rgba(255, 255, 255, 0.85);
  padding: 15px;
  border-radius: 8px;
}

/* Responsive: stack everything */
@media (max-width: 768px) {
  .feature,
  .aside-stack,
  .aside-bottom {
    grid-column: span 12;
  }

  .aside-stack {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .aside-item {
    flex: 1 1 100%;
  }

  .aside-bottom.left,
  .aside-bottom.right {
    grid-column: span 12;
  }
}