.project-role-band {
  --role-accent: #5865ff;
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 0 clamp(24px, 6vw, 96px);
  background: var(--role-band-bg, transparent);
  color: var(--role-band-text, inherit);
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
}

.project-role-band__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  border-block: 1px solid var(--role-band-line, rgba(127, 132, 155, .24));
}

.project-role-band__cell {
  min-height: 126px;
  padding: 30px clamp(22px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--role-band-line, rgba(127, 132, 155, .24));
}

.project-role-band__cell:first-child { text-align: left; padding-left: 0; }
.project-role-band__cell:last-child { border-right: 0; padding-right: 0; }
.project-role-band__label {
  margin-bottom: 12px;
  color: var(--role-band-muted, rgba(100, 105, 125, .72));
  font: 650 10px/1.1 var(--font-mono, ui-monospace, monospace);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.project-role-band__value {
  color: var(--role-band-value, currentColor);
  font: 500 clamp(15px, 1.45vw, 20px)/1.45 var(--font-body, Arial, sans-serif);
  letter-spacing: -.015em;
}
.project-role-band__cell:first-child .project-role-band__value {
  color: var(--role-accent);
  font-weight: 700;
  font-size: clamp(18px, 1.75vw, 24px);
}

@media (max-width: 820px) {
  .project-role-band { padding-inline: 20px; }
  .project-role-band__inner { grid-template-columns: 1fr 1fr; }
  .project-role-band__cell { min-height: 116px; padding: 24px 20px; text-align: left; border-bottom: 1px solid var(--role-band-line, rgba(127, 132, 155, .24)); }
  .project-role-band__cell:first-child { padding-left: 20px; }
  .project-role-band__cell:nth-child(2) { border-right: 0; }
  .project-role-band__cell:nth-last-child(-n+2) { border-bottom: 0; }
  .project-role-band__cell:last-child { padding-right: 20px; }
}

@media (max-width: 520px) {
  .project-role-band__inner { grid-template-columns: 1fr; }
  .project-role-band__cell { min-height: 0; padding: 22px 0; border-right: 0; }
  .project-role-band__cell:first-child,
  .project-role-band__cell:last-child { padding-inline: 0; }
  .project-role-band__cell:nth-last-child(2) { border-bottom: 1px solid var(--role-band-line, rgba(127, 132, 155, .24)); }
}