/* Reusable photo showcases, audience mosaic and support cards. */
feature-grid[variant="media"] .feature-grid__items { gap: 32px; }
feature-grid[variant="media"] .feature-grid__items > article { padding: 0; border: 0; border-radius: 0; background: transparent; }
feature-grid[variant="media"] .feature-grid__photo { width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; border-radius: 14px; }
feature-grid[variant="media"] .feature-grid__items h3 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 550; }
feature-grid[variant="media"] .feature-grid__items p { max-width: 530px; font-size: 17px; }
feature-grid[variant="gallery"] .feature-grid__items { gap: 8px; }
feature-grid[variant="gallery"] .feature-grid__items > article { position: relative; display: flex; align-items: end; min-height: 370px; padding: 32px; isolation: isolate; overflow: hidden; border: 0; border-radius: 4px; background: var(--lp-ink); color: white; }
feature-grid[variant="gallery"] .feature-grid__items > article::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgb(7 26 49 / 85%) 100%); }
feature-grid[variant="gallery"] .feature-grid__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
feature-grid[variant="gallery"] .feature-grid__items h3 { margin: 10px 0 0 !important; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; font-weight: 550; max-width: 460px; }
feature-grid[variant="gallery"] .feature-grid__caption { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
feature-grid[variant="support"] .feature-grid__items > article { display: flex; flex-direction: column; min-height: 360px; padding: 30px; border-radius: 16px; border: 0; background: rgb(255 255 255 / 4%); }
feature-grid[variant="support"] .feature-grid__items h3 { margin: 0 0 20px !important; font-size: clamp(25px, 2.4vw, 34px); font-weight: 550; }
feature-grid[variant="support"] .feature-grid__items p { font-size: 16px; }
feature-grid[variant="support"] .feature-grid__support-foot { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 44px; }
feature-grid[variant="support"] .feature-grid__support-foot > img { width: 48px; height: 48px; filter: brightness(0) invert(1); opacity: .85; }
feature-grid[variant="support"] .feature-grid__support-foot fint-icon { --fint-icon-size: 24px; --fint-icon-frame: 48px; border-radius: 14px 14px 14px 4px; }
feature-grid[variant="support"] .feature-grid__support-foot fint-icon > img { width: 24px; height: 24px; opacity: 1; }
feature-grid[variant="support"] .feature-grid__support-foot .lp-text-link { margin: 0; }
@media (max-width: 900px) {
  feature-grid[variant="support"] .feature-grid__items { grid-template-columns: 1fr; }
  feature-grid[variant="support"] .feature-grid__items > article { min-height: 280px; }
  feature-grid[variant="gallery"] .feature-grid__items > article { min-height: 300px; padding: 26px; }
}

/* Compact illustrated pairs: one small visual beside each explanation. */
feature-grid[variant="media"][density="compact"] .feature-grid__items { max-width: 1120px; margin-inline: auto; gap: 40px; }
feature-grid[variant="media"][density="compact"] .feature-grid__items > article { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 24px; }
feature-grid[variant="media"][density="compact"] fint-scene { width: 200px; margin: 0; }
feature-grid[variant="media"][density="compact"] .feature-grid__items h3 { margin: 0 0 14px !important; font-size: 26px; line-height: 1.15; }
feature-grid[variant="media"][density="compact"] .feature-grid__items p { font-size: 15px; line-height: 1.6; }
@media (max-width: 1100px) {
  feature-grid[variant="media"][density="compact"] .feature-grid__items > article { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; }
  feature-grid[variant="media"][density="compact"] fint-scene { width: 160px; }
}
@media (max-width: 900px) {
  feature-grid[variant="media"][density="compact"] .feature-grid__items { grid-template-columns: minmax(0, 1fr); max-width: 680px; gap: 32px; }
}
@media (max-width: 600px) {
  feature-grid[variant="media"][density="compact"] .feature-grid__items > article { grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: start; }
  feature-grid[variant="media"][density="compact"] fint-scene { width: 112px; }
  feature-grid[variant="media"][density="compact"] .feature-grid__items h3 { font-size: 22px; }
  feature-grid[variant="media"][density="compact"] .feature-grid__items p { font-size: 14px; }
}