/* Feature grid (MB-6; contract umbraco/blocks/featureGridBlock.md; generalised from Boyd featureGrid).
   Mobile first: one item per row at phone width, two columns from 768 px, the server's column
   count (--fg-cols) from 1024 px. Colours come from the band (css/shared/themes.css) and tokens only. A site restyles
   through the --fg-* properties below or its own CSS; the "Site artwork" hook is .feature-grid__artwork. */

.feature-grid {
  --fg-icon-size: 48px;
  --fg-tick-color: var(--color-eyebrow);
  --fg-rule: var(--border-width-heavy, 2px) solid currentColor;
  --fg-circle-border: 2px dashed var(--color-heading);
  --fg-photo-overlay: color-mix(in srgb, var(--band-bg, var(--color-page)) 82%, transparent);
  --fg-card-panel: color-mix(in srgb, var(--theme-deep-bg) 82%, transparent);
  --fg-card-text: var(--theme-deep-text);
  --fg-zoom-time: 0.5s;
  position: relative;
  isolation: isolate;
  overflow: hidden; /* clips the background photo and the artwork, never a focus ring (rings are drawn inside items) */
  padding-block: var(--section-space);
}

.feature-grid__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Heading group */
.feature-grid__head { max-width: var(--container-text, 42rem); margin-bottom: var(--space-10); }
.feature-grid__eyebrow { margin: 0 0 var(--space-4); }
.feature-grid__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-heading);
  overflow-wrap: break-word;
}
.feature-grid__intro { margin-top: var(--space-6); }
.feature-grid__intro > :first-child { margin-top: 0; }
.feature-grid__intro > :last-child { margin-bottom: 0; }

/* The grid */
.feature-grid__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10) var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .feature-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* No lone item: an odd last item spans both columns. */
  .feature-grid__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .feature-grid__list { grid-template-columns: repeat(var(--fg-cols, 3), minmax(0, 1fr)); }
  .feature-grid__item:last-child:nth-child(odd) { grid-column: auto; }
}

/* Item */
.feature-grid__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.feature-grid__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-3); }
.feature-grid__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-heading);
  overflow-wrap: break-word;
}
.feature-grid__text { margin: 0; }
.feature-grid__link { color: inherit; text-decoration: none; }
.section-colour .feature-grid__link:not(.btn) { color: inherit; }
/* One real link: the title's link covers the whole item; the ring is drawn on the item's edge, inside it. */
.feature-grid__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.feature-grid__item--linked:hover .feature-grid__link { text-decoration: underline; text-underline-offset: 3px; }
.feature-grid__link:focus-visible { outline: none; }
.feature-grid__link:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.feature-grid__more { display: inline-flex; margin-top: auto; padding-top: var(--space-2); color: var(--color-heading); }
.feature-grid__arrow { display: block; }
/* MB-23 Link text: a few words before the arrow (only when the editor types them). */
.feature-grid__more-text { margin-right: var(--space-2); font-weight: var(--fw-bold, 700); line-height: 20px; }

/* Icons */
.feature-grid__icon { width: var(--fg-icon-size); height: var(--fg-icon-size); overflow: hidden; color: var(--fg-tick-color); }
.feature-grid__icon picture, .feature-grid__icon img, .feature-grid__icon svg { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Icons, bordered: a line above each item */
.feature-grid--icons-bordered .feature-grid__item { padding-top: var(--space-6); border-top: var(--fg-rule); }
.feature-grid--icons-bordered .feature-grid__link:focus-visible::after { inset: calc(-1 * var(--border-width-heavy, 2px)) 0 0; }

/* Ticks on photo: the photo under an overlay of the band colour */
.feature-grid__photo { position: absolute; inset: 0; z-index: 0; }
.feature-grid__photo picture, .feature-grid__photo-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature-grid__photo::after { content: ""; position: absolute; inset: 0; background: var(--fg-photo-overlay); }
.feature-grid--ticks-on-photo .feature-grid__icon { --fg-icon-size: 32px; }

/* Photo cards: square photo, title and text on a dark panel at the foot */
.feature-grid--photo-cards .feature-grid__list { gap: var(--grid-gap); }
.feature-grid--photo-cards .feature-grid__item {
  display: grid;
  min-height: 20rem;
  aspect-ratio: 1;
  gap: 0;
  background: var(--theme-deep-bg);
  border-radius: var(--card-radius, 0);
  isolation: isolate; /* the photo (z-index -1) stays inside the card, under the text */
}
/* Photo shape (MB-20): landscape crops; square needs no class. The crop in the image URL has the same ratio. */
.feature-grid--photo-cards.feature-grid--photo-landscape-6-5 .feature-grid__item { aspect-ratio: 6 / 5; }
.feature-grid--photo-cards.feature-grid--photo-landscape-4-3 .feature-grid__item { aspect-ratio: 4 / 3; }
.feature-grid--photo-cards.feature-grid--photo-landscape-460-300 .feature-grid__item { aspect-ratio: 460 / 300; } /* MB-148 */
.feature-grid--photo-cards:is(.feature-grid--photo-landscape-6-5, .feature-grid--photo-landscape-4-3) .feature-grid__item { min-height: 0; } /* the ratio holds on phones too; long text still grows the card */
.feature-grid--photo-cards .feature-grid__media,
.feature-grid--photo-cards .feature-grid__body { grid-area: 1 / 1; }
.feature-grid__media { position: relative; z-index: -1; overflow: hidden; border-radius: inherit; } /* under the text, also while it zooms */
.feature-grid__media picture, .feature-grid__media-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature-grid--photo-cards .feature-grid__body {
  align-self: end;
  flex: none;
  margin: var(--space-4);
  padding: var(--space-6);
  background: var(--fg-card-panel);
  color: var(--fg-card-text);
  --color-heading: var(--fg-card-text);
  --color-focus: var(--theme-deep-focus, var(--fg-card-text));
}
.feature-grid--photo-cards .feature-grid__more { align-self: flex-end; color: var(--fg-card-text); }
.feature-grid--photo-cards .feature-grid__link:focus-visible::after { outline-color: var(--color-focus-inverse, var(--fg-card-text)); outline-offset: -6px; box-shadow: inset 0 0 0 6px var(--theme-deep-bg); }
@media (min-width: 1024px) {
  .feature-grid--photo-cards .feature-grid__item { min-height: 0; }
}

/* Photo zoom: on hover and on keyboard focus, clipped inside the frame; off under reduced motion */
.feature-grid__media-image, .feature-grid__icon-image { transition: transform var(--fg-zoom-time) linear; }
.feature-grid__item:hover :is(.feature-grid__media-image, .feature-grid__icon-image),
.feature-grid__item:focus-within :is(.feature-grid__media-image, .feature-grid__icon-image) { transform: scale(var(--fg-zoom-scale, 1.05)); }
@media (prefers-reduced-motion: reduce) {
  .feature-grid__media-image, .feature-grid__icon-image { transition: none; }
  .feature-grid__item:hover :is(.feature-grid__media-image, .feature-grid__icon-image),
  .feature-grid__item:focus-within :is(.feature-grid__media-image, .feature-grid__icon-image) { transform: none; }
}

/* Plain: title and text only */
.feature-grid--plain .feature-grid__item { gap: var(--space-2); }

/* Circles: titles in dashed circles; beside the intro from 1024 px */
.feature-grid--circles .feature-grid__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* lets aspect-ratio make true circles (a stretched item ignores it) */
  justify-content: center;
  gap: var(--space-6);
  --fg-per-row: 1;
}
.feature-grid--circles .feature-grid__item {
  flex: 0 0 calc((100% - (var(--fg-per-row) - 1) * var(--space-6)) / var(--fg-per-row));
  max-width: 13rem;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  border: var(--fg-circle-border);
  border-radius: 50%;
  text-align: center;
  grid-column: auto;
}
.feature-grid--circles .feature-grid__body { flex: none; justify-content: center; }
.feature-grid--circles .feature-grid__title { font-size: clamp(1rem, 2.4vw, var(--fs-h3)); overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .feature-grid--circles .feature-grid__list { --fg-per-row: 3; }
  .feature-grid--circles .feature-grid__list[data-count="2"],
  .feature-grid--circles .feature-grid__list[data-count="4"] { --fg-per-row: 2; }
}
@media (min-width: 1024px) {
  .feature-grid--circles .feature-grid__inner {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--space-12);
    align-items: center;
  }
  .feature-grid--circles .feature-grid__head { margin-bottom: 0; }
  .feature-grid--circles .feature-grid__list { --fg-per-row: var(--fg-cols, 3); }
}

/* Site artwork hook: master draws a quiet shape from the band's own colours; a site replaces it in its CSS. */
.feature-grid__artwork {
  position: absolute;
  z-index: 0;
  inset: auto auto -30% -10%;
  width: min(70vw, 48rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--band-bg, var(--color-page)) 70%, var(--c-white));
  pointer-events: none;
}

/* MB-25 (decision #127, from Boyd's Figures style): big figures over one short line, under a hairline. No headings;
   the line is the link. A site sets --feature-grid-figure-size and --feature-grid-figure-weight in its own CSS. */
.feature-grid--figures .feature-grid__list {
  --feature-grid-figure-size: clamp(2.125rem, 3.4vw, 3rem);
  gap: var(--space-8) var(--grid-gap);
  padding-top: clamp(var(--space-8), 3.4vw, var(--space-12));
  border-top: 1px solid var(--color-hairline);
}
.feature-grid__figure { gap: var(--space-3); }
.feature-grid__figure-value {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--feature-grid-figure-size);
  font-weight: var(--feature-grid-figure-weight, var(--fw-light, 300));
  line-height: 1;
  overflow-wrap: anywhere;
}
.feature-grid__figure-line { max-width: 20em; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
.feature-grid__figure-link { text-decoration: underline; }
.feature-grid__figure-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* MB-25 (from Boyd's Range card): a page card's Logo above its title and its own Card colour. A site styles the card
   further on .feature-grid__item--themed (e.g. a gradient from its own tokens). */
.feature-grid__logo { line-height: 0; }
.feature-grid__logo-image { display: block; width: auto; max-width: 10rem; height: auto; max-height: 3.5rem; object-fit: contain; }
.feature-grid__item--themed { padding: var(--space-6); background: var(--band-bg); color: var(--color-text); }
.feature-grid--photo-cards .feature-grid__item--themed { padding: 0; }

/* MB-128 (FuelChief import, #135): three switches, off by default; nothing here applies unless one is on.
   Intro beside the items: below 1200 px the head sits centred above the items, which take 2 columns from 576 px and
   the server's count (--fg-cols) from 768 px (the source's grid); from 1200 px the head is on the left (455 : 935, the
   source's widths) and the items on the right. A site sets --fg-beside-intro / --fg-beside-items / --fg-beside-gap. */
.feature-grid--intro-beside .feature-grid__head { margin-inline: auto; text-align: center; }
@media (min-width: 576px) {
  .feature-grid--intro-beside .feature-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid--intro-beside .feature-grid__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .feature-grid--intro-beside .feature-grid__list { grid-template-columns: repeat(var(--fg-cols, 3), minmax(0, 1fr)); }
  .feature-grid--intro-beside .feature-grid__item:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 1200px) {
  .feature-grid--intro-beside .feature-grid__inner {
    display: grid;
    grid-template-columns: minmax(0, var(--fg-beside-intro, 455fr)) minmax(0, var(--fg-beside-items, 935fr));
    gap: var(--fg-beside-gap, var(--space-12));
    align-items: start;
  }
  .feature-grid--intro-beside .feature-grid__head { max-width: none; margin: 0; text-align: start; }
}

/* 2 + 1 wide (after Intro beside, so it wins when both are on): three photo cards as two, then the third full width,
   from 768 px; three in a row over 1500 px (the source's max-width: 1500px). The cards are as tall as their text (no
   Photo shape; at least --fg-wide-card-min-height, about the source's 211 px): the photo covers the card. */
.feature-grid--two-plus-one .feature-grid__item { aspect-ratio: auto; min-height: var(--fg-wide-card-min-height, 13rem); }
.feature-grid--two-plus-one .feature-grid__media { position: absolute; inset: 0; }
.feature-grid--two-plus-one .feature-grid__list { grid-template-columns: 1fr; }
.feature-grid--two-plus-one .feature-grid__item:last-child:nth-child(odd) { grid-column: auto; }
@media (min-width: 768px) {
  .feature-grid--two-plus-one .feature-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid--two-plus-one .feature-grid__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1501px) {
  .feature-grid--two-plus-one .feature-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-grid--two-plus-one .feature-grid__item:last-child:nth-child(odd) { grid-column: auto; }
}

/* Paragraphs in item text: one p per line of the item's text, 1rem apart (the source's paragraph margin). */
.feature-grid__text--paragraphs > p { margin: 0; }
.feature-grid__text--paragraphs > p + p { margin-top: var(--fg-paragraph-gap, var(--space-4)); }
/* MB-128 r2: Formatted text (bold, links). Paragraphs as above; its links sit over a linked item's stretched link. */
.feature-grid__text--formatted > p { margin: 0; }
.feature-grid__text--formatted > p + p { margin-top: var(--fg-paragraph-gap, var(--space-4)); }
.feature-grid__text--formatted a { position: relative; z-index: 3; text-decoration: underline; text-underline-offset: 3px; }

/* Groups (MB-142, FuelChief "The Fuelchief System", measured from the source's bundle): each group a row: its cell in the
   accent colour, then its items as cards inset in the band colour, framed by a thin accent line. From 992 px the cell and
   the items share equal columns (--fg-group-cols: the cell plus the most items a group has); 768-991 px the cell runs
   across the top and the items sit side by side under it; below 768 px one per row. Hover (and keyboard focus) turns a
   card the accent colour, as the source: background over 0.2 s linear, the icon to the cell's text colour over 0.3 s ease
   (--theme-accent-icon; white as the source when the accent text is white; the source's site-wide img transition), title and text at once. No photo zoom here. */
.feature-grid--groups {
  --fg-group-bg: var(--theme-accent-bg);
  --fg-group-text: var(--theme-accent-text);
  --fg-group-line: var(--border-width, 1px) solid var(--fg-group-bg);
  --fg-group-card-bg: var(--theme-muted-bg);
  --fg-group-card-text: var(--theme-muted-text);
  --fg-group-radius: 3px;
  --fg-group-row-gap: 10px;
  --fg-group-inset: 16px;
  --fg-group-card-pad: 30px;
  --fg-group-card-gap: 20px;
  --fg-group-title-size: 1.125rem;
  --fg-group-name-size: 1.625rem;
  --fg-group-text-size: 0.875rem;
  --fg-group-title-weight: var(--fw-heading, var(--fw-bold));
  --fg-group-text-weight: var(--fw-body, var(--fw-medium));
  --fg-group-fade: 0.2s linear;
  --fg-group-icon-fade: 0.3s ease;
  --fg-group-icon-hover: var(--theme-accent-icon, brightness(0) invert(1));
  --fg-icon-size: 40px;
}
/* On a Light or Grey band the cards take the page colour, so they don't merge with the band (UX-MB-142 U2). */
.feature-grid--groups:where(.band--light, .band--muted) { --fg-group-card-bg: var(--theme-plain-bg); --fg-group-card-text: var(--theme-plain-text); }
.feature-grid--groups .feature-grid__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.feature-grid__group { min-width: 0; }
.feature-grid__group + .feature-grid__group { margin-top: var(--fg-group-inset); }
.feature-grid__group-cell {
  display: flex;
  flex-direction: column;
  gap: var(--fg-group-card-gap);
  padding: var(--fg-group-card-pad) 23px;
  background: var(--fg-group-bg);
  color: var(--fg-group-text);
  border-radius: var(--fg-group-radius) var(--fg-group-radius) 0 0;
}
.feature-grid__group-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fg-group-name-size);
  font-weight: var(--fg-group-title-weight);
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: inherit;
  overflow-wrap: break-word;
}
.feature-grid--groups .feature-grid__text { font-size: var(--fg-group-text-size); font-weight: var(--fg-group-text-weight); line-height: 1.25; letter-spacing: -0.02em; }
.feature-grid__group-items { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.feature-grid--groups .feature-grid__group-item {
  position: static;
  display: block;
  padding: calc(var(--fg-group-inset) / 2);
  border-inline: var(--fg-group-line);
}
.feature-grid--groups .feature-grid__group-items[data-count="3"] > :nth-child(2) { padding-block: 0; }
.feature-grid--groups .feature-grid__group-item:last-child { border-bottom: var(--fg-group-line); border-radius: 0 0 0 var(--fg-group-radius); }
.feature-grid__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
  padding: var(--fg-group-card-pad) 15px;
  background: var(--fg-group-card-bg);
  color: var(--fg-group-card-text);
  border-radius: var(--fg-group-radius);
  --color-heading: var(--fg-group-card-text);
  transition: background-color var(--fg-group-fade);
}
.feature-grid__card .feature-grid__body { gap: var(--fg-group-card-gap); }
.feature-grid__card .feature-grid__title { font-size: var(--fg-group-title-size); font-weight: var(--fg-group-title-weight); line-height: 1.15; letter-spacing: -0.03em; }
.feature-grid__card .feature-grid__icon { overflow: visible; }
.feature-grid__card .feature-grid__icon-image { transition: none; }
.feature-grid__card .feature-grid__icon img { transition: filter var(--fg-group-icon-fade); }
.feature-grid--groups .feature-grid__item:is(:hover, :focus-within) .feature-grid__icon-image { transform: none; }
.feature-grid--groups .feature-grid__item:is(:hover, :focus-within) .feature-grid__card { background-color: var(--fg-group-bg); color: var(--fg-group-text); --color-heading: var(--fg-group-text); }
.feature-grid--groups .feature-grid__item:is(:hover, :focus-within) .feature-grid__icon img { filter: var(--fg-group-icon-hover); }
.feature-grid--groups .feature-grid__link:focus-visible::after { outline-offset: 3px; border-radius: var(--fg-group-radius); }
@media (max-width: 575.98px) {
  .feature-grid--groups { --fg-group-title-size: 1rem; --fg-group-name-size: 1.375rem; --fg-group-text-size: 1rem; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .feature-grid--groups { --fg-group-title-size: 1.0625rem; --fg-group-name-size: 1.5rem; }
}
@media (min-width: 768px) {
  .feature-grid__group-items { grid-template-columns: repeat(calc(var(--fg-group-cols, 4) - 1), minmax(0, 1fr)); }
  .feature-grid--groups .feature-grid__group-item { border-inline: 0; border-bottom: var(--fg-group-line); }
  .feature-grid--groups .feature-grid__group-item:last-child:nth-child(odd) { grid-column: auto; } /* the grid's "no lone item" rule is not for cards in a group */
  .feature-grid--groups .feature-grid__group-item:first-child { border-left: var(--fg-group-line); border-bottom-left-radius: var(--fg-group-radius); }
  .feature-grid--groups .feature-grid__group-item:last-child { border-right: var(--fg-group-line); border-radius: 0; }
  .feature-grid--groups .feature-grid__group-items[data-count="3"] > :nth-child(2) { padding-block: calc(var(--fg-group-inset) / 2); padding-inline: 0; }
  .feature-grid__card { padding: 15px; }
}
@media (min-width: 992px) {
  .feature-grid--groups .feature-grid__list { row-gap: var(--fg-group-row-gap); }
  .feature-grid__group { display: grid; grid-template-columns: repeat(var(--fg-group-cols, 4), minmax(0, 1fr)); }
  .feature-grid__group + .feature-grid__group { margin-top: 0; }
  .feature-grid__group-cell { padding: var(--fg-group-card-pad); border-radius: var(--fg-group-radius) 0 0 var(--fg-group-radius); }
  .feature-grid__group-items { grid-column: 2 / -1; }
  .feature-grid--groups .feature-grid__group-item { padding: var(--fg-group-inset); border-top: var(--fg-group-line); }
  .feature-grid--groups .feature-grid__group-item:first-child { border-left: 0; border-bottom-left-radius: 0; }
  .feature-grid--groups .feature-grid__group-item:last-child { border-radius: 0 var(--fg-group-radius) var(--fg-group-radius) 0; }
  .feature-grid--groups .feature-grid__group-items[data-count="3"] > :nth-child(2) { padding-block: var(--fg-group-inset); }
  .feature-grid--groups .feature-grid__group-items:not([data-count="3"]) > * + * { padding-inline-start: 0; }
  .feature-grid__card { gap: var(--fg-group-card-pad); padding: var(--fg-group-card-pad); }
}

@media print {
  .feature-grid__photo, .feature-grid__artwork { display: none; }
}

/* FC-MFIX10 (M-CHANGES-1): "Shade behind the words" on Photo cards (Light, Medium, Strong; Off = no class). A layer of
   the Darkest colour behind each card's words only: from the card's foot up to the top of the words, fading out over
   --fg-shade-fade above them; under the card's own panel (--fg-card-panel), over the photo. The photo, its crop and the
   layout do not change. Site hooks: --text-shade-light / --text-shade-medium / --text-shade-strong (35 %, 55 %, 75 %),
   --fg-shade-fade (3rem). */
.feature-grid--shade-light { --fg-text-shade: color-mix(in srgb, var(--theme-deep-bg, #000) var(--text-shade-light, 35%), transparent); }
.feature-grid--shade-medium { --fg-text-shade: color-mix(in srgb, var(--theme-deep-bg, #000) var(--text-shade-medium, 55%), transparent); }
.feature-grid--shade-strong { --fg-text-shade: color-mix(in srgb, var(--theme-deep-bg, #000) var(--text-shade-strong, 75%), transparent); }
.feature-grid--photo-cards:is(.feature-grid--shade-light, .feature-grid--shade-medium, .feature-grid--shade-strong) .feature-grid__body { position: relative; }
.feature-grid--photo-cards:is(.feature-grid--shade-light, .feature-grid--shade-medium, .feature-grid--shade-strong) .feature-grid__body::before {
  content: "";
  position: absolute;
  z-index: -1; /* in the card's own layer stack: over the photo, under the words and the panel */
  inset: calc(-1 * var(--fg-shade-fade, 3rem)) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
  background: linear-gradient(to top, var(--fg-text-shade) calc(100% - var(--fg-shade-fade, 3rem)), transparent);
  border-radius: 0 0 var(--card-radius, 0) var(--card-radius, 0);
  pointer-events: none;
}