/* ===================================================== images-styles.css Styles for
blocks inside the pillar article. Mounted in as . ===================================================== */ /* Generic figure inside the article body */ article figure.content-figure { margin: 2rem 0 2.25rem; padding: 0; } article figure.content-figure img { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid var(--border, #e5e0d8); box-shadow: var(--shadow-sm, 0 1px 2px rgba(26, 26, 26, 0.04), 0 1px 3px rgba(26, 26, 26, 0.06)); background: var(--bg-card, #ffffff); } article figure.content-figure figcaption { margin-top: 0.65rem; padding: 0 0.25rem; font-family: var(--font-body, 'Inter', sans-serif); font-size: 14px; line-height: 1.5; color: var(--text-secondary, #525252); font-style: italic; text-align: left; border-left: 3px solid var(--accent, #d45811); padding-left: 0.85rem; } /* Hero figure overrides — design.html already styles .hero-image, so we only guarantee the image fills its frame, stays sharp, and is centered. */ article figure.hero-image { margin-top: 1.4rem; margin-bottom: 1.6rem; margin-left: auto; margin-right: auto; max-width: var(--content-width, 760px); width: 100%; display: block; } article figure.hero-image img { width: 100%; height: auto; display: block; border-radius: 6px; } /* Tablet */ @media (max-width: 900px) { article figure.content-figure { margin: 1.5rem 0 1.75rem; } article figure.content-figure figcaption { font-size: 13px; padding-left: 0.7rem; } } /* Mobile (≤ 375 px) */ @media (max-width: 600px) { article figure.content-figure { margin: 1.25rem 0 1.5rem; } article figure.content-figure img { border-radius: 4px; } article figure.content-figure figcaption { font-size: 13px; line-height: 1.45; padding-left: 0.6rem; } }