/* 01 Why we built Vera: headline and standfirst side by side, then the walkthrough as a wide figure:
   a crisp product screen with a play button, nothing laid over it. */
.feature__body {
  grid-column: 4 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.feature__title { grid-column: 1 / span 5; max-width: 12em; }
.feature__aside {
  grid-column: 6 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.feature__text { max-width: 440px; color: var(--ink-2); line-height: 1.5; }

.feature__media {
  position: relative;
  grid-column: 4 / -1;
  aspect-ratio: 16 / 6.4;
  margin-top: 48px;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
  container-type: inline-size;
}
.feature__screen { position: absolute; inset: 0; }
.feature__screen .vg { font-size: clamp(12px, 1.7cqw, 18px); }
.feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--carbon) 18%, transparent);
  pointer-events: none;
}
.feature__media .play { z-index: 3; }

@media (max-width: 1099px) {
  .feature__title { grid-column: 1 / -1; }
  .feature__aside { grid-column: 1 / -1; margin-top: 24px; }
  .feature__media { aspect-ratio: 16 / 8; }
}

@media (max-width: 767px) {
  .feature__body, .feature__media { grid-column: 1 / -1; grid-row: auto; }
  .feature__text { font-size: 16px; }
  .feature__media { aspect-ratio: 4 / 3; margin-top: 32px; }
}