/* Audience: three cards with a 3D picture, module-colored left strip, quiet footnote. */
.audience__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2.5vw, 24px); }
.audience__card { --aud-a: var(--color-m1-a); --aud-b: var(--color-m1-b); --aud-ink: var(--color-m1-ink); position: relative; isolation: isolate; min-width: 0; overflow: hidden; padding: clamp(20px, 3vw, 28px) clamp(18px, 3vw, 28px) clamp(20px, 3vw, 28px) clamp(26px, 3.5vw, 34px); border-radius: var(--size-radius); background: var(--color-card); border: 1px solid var(--color-line); box-shadow: var(--shadow-card); }
.audience__card--m3 { --aud-a: var(--color-m3-a); --aud-b: var(--color-m3-b); --aud-ink: var(--color-m3-ink); }
.audience__card--m4 { --aud-a: var(--color-m4-a); --aud-b: var(--color-m4-b); --aud-ink: var(--color-m4-ink); }
.audience__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--aud-a), var(--aud-b)); }
.audience__art { display: block; width: 80px; height: 80px; filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--color-navy-deep) 35%, transparent)); }
/* the picture's shadow reaches under the texts: texts paint above it */
.audience__label, .audience__title, .audience__text { position: relative; }
.audience__label { margin: 16px 0 6px; font-size: var(--size-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--aud-ink); }
.audience__title { margin: 0; font-family: var(--font-body); font-size: var(--size-h3); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.audience__text { margin: 10px 0 0; color: var(--color-ink-2); overflow-wrap: anywhere; }
.audience__note { max-width: 46rem; margin: clamp(20px, 3.5vw, 32px) auto 0; text-align: center; font-size: var(--size-text-sm); color: var(--color-ink-2); }

@media (min-width: 768px) and (max-width: 1023px) {
  .audience__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audience__card:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .audience__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audience__art { width: 96px; height: 96px; }
}