/* Hero eyebrows share one public typography and color contract. */
:where(.ig-section-hero) :where(.ig-section-actions).ig-section-actions-grid-contents {
  display: contents;
}

:where(.ig-section-hero) :where(.ig-section-actions).ig-grid-inner {
  display: grid;
  gap: 0;
}

:where(.ig-section-hero) :where(.ig-section-actions).ig-grid-inner > .ig-section-action {
  align-self: center;
  justify-self: stretch;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: auto;
  min-block-size: var(--control-height);
}

:where(.ig-section-hero) :where(.ig-section-actions).ig-section-actions-grid-contents > .ig-section-action,
:where(.ig-section-hero) .ig-grid-container > .ig-section-action {
  align-self: center;
  justify-self: stretch;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: auto;
  min-block-size: var(--control-height);
}

:where(.ig-section-hero) .ig-section-hero-eyebrow {
  color: var(
    --section-eyebrow-color,
    var(--section-hero-description-color, currentColor)
  );
  font-family: var(
    --section-eyebrow-font-family,
    var(--font-navigation, var(--font-paragraph, inherit))
  );
  font-size: var(--section-eyebrow-font-size, 0.875rem);
  font-weight: var(--section-eyebrow-font-weight, 600);
  line-height: var(--section-eyebrow-line-height, 1.35);
  letter-spacing: var(--section-eyebrow-letter-spacing, normal);
  text-transform: var(--section-eyebrow-text-transform, none);
}