.campaign-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  row-gap: clamp(28px, 3.2vw, 52px);
  width: 100%;
  max-width: 1920px;
  padding-inline: var(--grid-rail);
  padding-top: clamp(32px, 5vw, 80px);
}

.campaign-index__intro h2 {
  max-width: 260px;
  margin-top: 12px;
  font-size: clamp(38px, 2.4vw, 46px);
}

.campaign-index__intro > p:last-child {
  max-width: 27ch;
  margin-top: 16px;
}

.campaign-index__list {
  display: grid;
  gap: clamp(4px, .45vw, 8px);
  padding: 0;
  list-style: none;
}

.campaign-index__row {
  --index-gap: clamp(10px, 1vw, 18px);
  --index-meta: max(28%, 224px);
  --index-preview: min(21%, 245px);
  position: relative;
}

.campaign-index__trigger {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) var(--index-preview) var(--index-meta);
  align-items: center;
  gap: var(--index-gap);
  width: 100%;
  min-height: clamp(54px, 5vw, 76px);
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.campaign-index__number,
.campaign-index__metadata {
  color: var(--muted);
  font: 400 11px/1.3 var(--mono);
}

.campaign-index__name {
  min-width: 0;
  font: 700 clamp(23px, 3.5vw, 56px)/.97 var(--display);
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.campaign-index__metadata {
  grid-column: 4;
  display: grid;
  grid-template-columns: minmax(12ch, 1fr) minmax(10ch, 1fr) minmax(8ch, 1fr);
  align-items: center;
  gap: clamp(7px, 1vw, 15px);
}

.campaign-index__preview {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: calc(var(--index-meta) + var(--index-gap));
  display: block;
  width: var(--index-preview);
  aspect-ratio: 245 / 163;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-46%);
  pointer-events: none;
}

.campaign-index__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campaign-index__row[data-active] .campaign-index__trigger { color: var(--accent); }

.campaign-index__row[data-active] .campaign-index__preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
}

.campaign-index__list[data-active] .campaign-index__row:not([data-active]) .campaign-index__name { opacity: .58; }

@media (prefers-reduced-motion: no-preference) {
  .campaign-index__trigger { transition: color 150ms ease; }
  .campaign-index__name { transition: opacity 150ms ease; }
  .campaign-index__preview { transition: opacity 150ms ease, transform 160ms ease; }
}

@media (max-width: 1000px) {
  .campaign-index { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); column-gap: 28px; }
  .campaign-index__row { --index-meta: max(38%, 224px); --index-preview: 17%; }
  .campaign-index__trigger { grid-template-columns: 22px minmax(0, 1fr) var(--index-preview) var(--index-meta); }
  .campaign-index__name { font-size: clamp(23px, 4vw, 42px); }
}

@media (max-width: 760px) {
  .campaign-index { grid-template-columns: minmax(0, 1fr); }
  .campaign-index__intro > p:last-child { margin-top: 11px; }
}

@media (hover: none), (max-width: 540px) {
  .campaign-index__trigger {
    grid-template-columns: 22px minmax(0, 1fr);
    row-gap: 7px;
    min-height: 65px;
  }

  .campaign-index__number { grid-row: 1 / 3; }

  .campaign-index__metadata {
    grid-column: 2;
    grid-template-columns: repeat(3, minmax(0, max-content));
    gap: 6px 12px;
  }

  .campaign-index__preview,
  .campaign-index__row[data-active] .campaign-index__preview {
    position: static;
    width: min(calc(100% - 32px), 245px);
    margin: 2px 0 10px 32px;
    transform: none;
  }

  .campaign-index__preview { display: none; }
  .campaign-index__row[data-active] .campaign-index__preview { display: block; }
  .campaign-index__list[data-active] .campaign-index__row:not([data-active]) .campaign-index__name { opacity: 1; }
}