.domain-study {
  --domains-space: var(--section-space);
  --domains-inset: var(--s10);
  --domains-intro-width: 725px;
  --domains-intro-gap: var(--s6);
  --domains-grid-gap: var(--s6);
  --domains-grid-offset: var(--s14);
  --domains-note-offset: 93px;
  --domains-title: var(--heading);
  --domains-card-title: 28px;
  --domains-copy: var(--body);
  --domains-copy-color: #e2e2e2;
  --domains-mark-size: 32px;
  --domains-pixel-size: 6px;
  padding: var(--domains-space) var(--domains-inset);
  background: var(--v-navy);
  color: var(--v-white);
  scroll-margin-top: var(--s6);
}

.domain-study__intro {
  display: grid;
  gap: var(--domains-intro-gap);
  max-width: var(--domains-intro-width);
  margin: 0 auto;
  text-align: center;
}

.domain-study__intro h2 {
  margin: 0;
  font-size: var(--domains-title);
  font-weight: var(--title-weight);
  line-height: 1.2;
}

.domain-study__intro p {
  margin: 0;
  font-size: var(--lead);
  line-height: 1.4;
  color: var(--domains-copy-color);
}

.domain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--domains-grid-gap);
  margin-top: var(--domains-grid-offset);
}

.domain-item {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--s4);
}

.pixel-mark {
  width: var(--domains-mark-size);
  height: var(--domains-mark-size);
  color: var(--v-white);
  overflow: visible;
  stroke: none;
}

.pixel-mark rect {
  width: var(--domains-pixel-size);
  height: var(--domains-pixel-size);
  fill: currentColor;
}

.pixel-mark [data-domain-pixel] {
  transform-box: fill-box;
  transform-origin: center;
}

.domain-item h3 {
  max-width: 8.5em;
  margin: 0;
  font-size: var(--domains-card-title);
  font-weight: var(--title-weight);
  line-height: 1.12;
}

.domain-item p {
  margin: 0;
  margin-top: calc(-1 * var(--s2));
  font-size: var(--domains-copy);
  line-height: 1.5;
  color: var(--domains-copy-color);
}

.domain-study__note {
  max-width: var(--domains-intro-width);
  margin: var(--domains-note-offset) auto 0;
  font-size: var(--meta);
  line-height: 1.5;
  color: var(--domains-copy-color);
  text-align: center;
}

@media (max-width: 1000px) {
  .domain-study {
    --domains-space: 64px;
    --domains-inset: var(--s4);
    --domains-note-offset: var(--s12);
    --domains-title: var(--heading);
    --domains-card-title: 24px;
  }

  .domain-study__intro {
    margin-inline: 0;
    text-align: left;
  }

  .domain-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .domain-item h3 {
    max-width: none;
  }

  .domain-study__note {
    margin-inline: 0;
    text-align: left;
  }
}