/* Project image grid (test layout from Figma)
   - Grid is 98% of the page wide on its own (project pages size it in
     css/project-panel.css); .75rem (12px) gaps, 2rem above and below
   - Large cells span both columns at 3:2, small cells are 3:4
   - Images fill their cell and crop slightly (object-fit: cover) */

.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  width: 98%;
  margin: 2rem auto;
}

.project-grid_cell {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius, .75rem); /* the site's corner rounding (css/styles.css) */
  background-color: #e8e8e8; /* placeholder gray until an image goes in */
}

.project-grid_cell.is-large {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
}

.project-grid_cell > img,
.project-grid_cell > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .is-outlined: a hairline around cells whose image has a white
   background, so they don't blend into the white page. Drawn on top of
   the image; same width and color as the site's other dividers
   (css/styles.css). */
.project-grid_cell.is-outlined::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--divider-width, .5px) solid var(--divider, #a6a6a6);
  border-radius: inherit;
  pointer-events: none;
}