.related-posts { clear: both; } .related-posts-title { font-size: var(--fs-l); font-weight: 700; } .related-post-inner { display: flex; flex-direction: column; height: 100%; background-color: var(--color-content-bg, #fff); border-radius: var(--radius-m); box-shadow: var(--shadow); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); } .related-post-inner:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .related-posts .related-image { aspect-ratio: var(--rp-aspect, 16 / 9); background-color: var(--color-border, #e5e5e5); border-bottom: 0; display: block; flex-shrink: 0; width: 100%; position: relative; overflow: hidden; } .related-image-img { width: 100%; height: 100%; object-fit: cover; display: block; } .related-image-placeholder { background: var(--color-border); } .rp-debug-score { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; z-index: 10; } .related-post-content { display: flex; flex-direction: column; flex: 1; padding: var(--space-third); } .related-post-category { display: inline-block; font-size: var(--fs-xs, 11px); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-primary, #C0392B); margin-bottom: var(--space-xs); } .related-post-title { font-size: var(--fs-base); font-weight: 600; line-height: var(--lh-tight); margin: 0; } .related-post-title a { border-bottom: 0; color: var(--color-text, inherit); display: block; transition: color var(--transition); } .related-post-title a:hover { color: var(--color-primary, #C0392B); } .related-post-meta { color: var(--color-text-sec, #666); margin-top: var(--space-xs); } .related-post-sep { opacity: 0.5; } .related-post-reading-time { color: var(--color-text-sec, #666); } .related-post-excerpt { color: var(--color-text-sec, #666); margin-top: var(--space-xs); } @media all and (max-width: 640px) { .related-posts .related-image { aspect-ratio: 2 / 1; } .related-post-title { font-size: var(--fs-s); } } @media (prefers-reduced-motion: reduce) { .related-post-inner { transition: none; } .related-post-inner:hover { transform: none; } }