.workspace { width: 100%; }
.workspace h2 {
  margin: 0 0 24px;
  color: var(--color-home-heading);
  font: var(--weight-medium) var(--text-body)/29px var(--font-body);
  letter-spacing: -.25px;
}
.workspace-grid {
  --gallery-columns: 4;
  --gallery-gap: 16px;
  --gallery-feature-span: 2;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
  gap: var(--gallery-gap);
  align-items: start;
}
.workspace-grid.is-masonry { display: block; }
.workspace-card {
  --card-span: 1;
  grid-column: span var(--card-span);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--gallery-card-border);
  border-radius: var(--radius-card);
  background: var(--gallery-card-fill);
  color: var(--gallery-title-color);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 160ms ease-out;
}
/* A wider squircle transition keeps the visual size close to the former 12px
   circular corners while easing the curve smoothly into each straight edge. */
@supports (corner-shape: squircle) {
  .workspace-card {
    border-radius: var(--gallery-card-radius);
    corner-shape: squircle;
  }
}
.workspace-grid > .workspace-card--featured {
  --card-span: var(--gallery-feature-span);
}
.workspace-card--showcase { cursor: default; }
.is-masonry .workspace-card { position: absolute; width: var(--masonry-width); }
.workspace-cover { position: relative; overflow: hidden; padding: 0; border: 0; border-radius: 0; }
.workspace-cover img, .workspace-cover video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: inherit;
}
.workspace-caption {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 0;
  background: var(--gallery-caption-fill);
  color: var(--gallery-title-color);
  font: var(--weight-regular) var(--text-small)/24px var(--font-body);
  text-align: center;
  overflow-wrap: anywhere;
}
.workspace-card:focus-visible { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: 4px; }
@media (hover: hover) { .workspace-card[href]:hover { border-color: var(--gallery-card-hover); } }
@media (min-width: 1700px) { .workspace-grid { --gallery-columns: 5; } }
@media (min-width: 2260px) { .workspace-grid { --gallery-columns: 6; } }
@media (max-width: 1179px) { .workspace-grid { --gallery-columns: 3; } }
@media (max-width: 679px) { .workspace-grid { --gallery-columns: 1; --gallery-feature-span: 1; } }
@media (prefers-reduced-motion: reduce) { .workspace-card { transition: none; } }