.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(218px, 100%), 1fr));
  gap: 10px;
}
.media-product {
  --media-accent: #496440;
  --media-wash: #e5ead7;
  border-top: 3px solid var(--media-accent);
}
.media-product[data-media-product='audio'] {
  --media-accent: #745622;
  --media-wash: #f2e5c6;
}
.media-product[data-media-product='video'] {
  --media-accent: #3d6378;
  --media-wash: #dfebed;
}
.media-product-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}
.media-icon {
  box-sizing: content-box;
  padding: 5px;
  color: var(--media-accent);
  background: var(--media-wash);
}
.media-product[data-state='locked'] .office-flag {
  color: #4a5149;
  background: #e4e5db;
}
.media-product[data-state='building'] .office-flag {
  color: #593b18;
  background: #f1e3bc;
}
.media-product .office-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.media-gate {
  display: grid;
  align-content: start;
  gap: 3px;
  margin-top: auto;
  padding-left: 7px;
  border-left: 2px solid var(--media-accent);
  color: var(--ink-soft);
  font-size: 12px;
}
.media-gate time {
  font: 700 11px/1.3 var(--mono);
}
.media-receipt {
  padding: 7px;
  border-left: 2px solid var(--media-accent);
  background: var(--media-wash);
}
.media-receipt .office-rows > div:last-child {
  border-bottom: 0;
}
.media-receipt .eyebrow,
.media-schedule {
  color: var(--media-accent);
}
.media-schedule {
  font: 700 12px/1.4 var(--mono);
}
.media-product .button {
  white-space: normal;
}