.md-related-content { background: var(--color-content-bg); border: 1px solid color-mix(in srgb, var(--color-border), transparent 30%); border-radius: var(--radius-l); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); } .md-related-content.has-shadow { box-shadow: 0 8px 24px -10px color-mix(in oklch, var(--color-headline, #212121) 16%, transparent); } .md-related-content-label { background: color-mix(in srgb, var(--color-secondary), transparent 10%); color: var(--color-text-light); letter-spacing: 0.08em; padding: 0.3125rem 1.8125rem; } .md-related-content-link { color: inherit; display: block; text-decoration: none; } .md-related-content-image { overflow: hidden; position: relative; } .md-related-content-img { aspect-ratio: 1 / 1; display: block; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); width: 100%; } .md-related-content-link:hover .md-related-content-img { transform: scale(1.04); } .md-related-content-text { display: flex; flex-direction: column; gap: var(--space-xs, 4px); } .md-related-content-title { color: var(--color-text); line-height: 1.3; transition: color var(--transition); } .md-related-content-link:hover .md-related-content-title { color: var(--color-primary); } .md-related-content-desc { color: var(--color-text-sec); line-height: 1.5; } .md-related-content-cta { color: var(--color-primary); } .md-related-content--card .md-related-content-item, .md-related-content-card .md-related-content-item { align-items: stretch; display: flex; flex-direction: row; } .md-related-content--card .md-related-content-image, .md-related-content-card .md-related-content-image { aspect-ratio: 1 / 1; flex-shrink: 0; width: 7.5rem; } .md-related-content--spotlight .md-related-content-item { display: grid; gap: 0; grid-template-columns: minmax(0, 14rem) 1fr; } .md-related-content--spotlight .md-related-content-image { aspect-ratio: 1 / 1; } .md-related-content--spotlight .md-related-content-title { font-size: 1.25em; font-weight: 700; } .md-related-content--grid { background: transparent; border: 0; overflow: visible; } .md-related-content--grid .md-related-content-label { background: transparent; color: var(--color-text); padding: 0 0 0.3125rem; } .md-related-content--grid .md-related-content-item { background: var(--color-content-bg); border: 1px solid color-mix(in srgb, var(--color-border), transparent 40%); border-radius: var(--radius-m); display: flex; flex-direction: column; overflow: hidden; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .md-related-content--grid .md-related-content-item:hover { border-color: color-mix(in srgb, var(--color-primary), transparent 60%); box-shadow: 0 6px 18px -8px color-mix(in oklch, var(--color-headline, #212121) 18%, transparent); transform: translateY(-2px); } .md-related-content--grid .md-related-content-image { aspect-ratio: 1 / 1; } .md-related-content--list { background: transparent; border: 0; overflow: visible; } .md-related-content--list .md-related-content-label { background: transparent; color: var(--color-text); padding: 0 0 0.3125rem; } .md-related-content--list .md-related-content-item { align-items: stretch; background: var(--color-content-bg); border: 1px solid color-mix(in srgb, var(--color-border), transparent 40%); border-radius: var(--radius-m); display: flex; flex-direction: row; overflow: hidden; transition: border-color var(--transition), transform var(--transition); } .md-related-content--list .md-related-content-item:hover { border-color: color-mix(in srgb, var(--color-primary), transparent 60%); transform: translateX(2px); } .md-related-content--list .md-related-content-image { aspect-ratio: 1 / 1; flex-shrink: 0; width: 6rem; } .md-related-content--inline { background: transparent; border: 0; overflow: visible; } .md-related-content--inline .md-related-content-label { background: transparent; color: var(--color-text); padding: 0 0 0.3125rem; } .md-related-content--inline .md-related-content-item { background: color-mix(in srgb, var(--color-primary), transparent 92%); border-radius: 999rem; padding: var(--space-xs, 4px) var(--space-half, 0.9375rem); transition: background var(--transition), color var(--transition); } .md-related-content--inline .md-related-content-item:hover { background: color-mix(in srgb, var(--color-primary), transparent 80%); } .md-related-content--inline .md-related-content-text { display: inline; gap: 0; } .md-related-content--inline .md-related-content-title { color: var(--color-primary); } @media (max-width: 992px) { .md-related-content--spotlight .md-related-content-item { grid-template-columns: minmax(0, 9rem) 1fr; } } @media (max-width: 640px) { .md-related-content--card .md-related-content-image, .md-related-content-card .md-related-content-image { width: 6rem; } .md-related-content--spotlight .md-related-content-item { grid-template-columns: 1fr; } .md-related-content--list .md-related-content-image { width: 5rem; } } .md-related-content-compact .md-related-content-label, .md-related-content--compact .md-related-content-label { display: inline-block; border-radius: var(--radius-s) var(--radius-s) 0 0; } .md-related-content-compact .md-related-content-text, .md-related-content--compact .md-related-content-text { flex-direction: row; align-items: center; justify-content: space-between; } .md-related-content-minimal, .md-related-content--minimal { background: transparent; border: none; border-left: 3px solid var(--color-primary); border-radius: 0; padding-left: 1.8125rem; } .md-related-content-minimal:hover, .md-related-content--minimal:hover { box-shadow: none; } .md-related-content-minimal .md-related-content-label, .md-related-content--minimal .md-related-content-label { background: transparent; color: var(--color-primary); padding: 0 0 0.3125rem; } [data-theme="dark"] .md-related-content { background: color-mix(in srgb, var(--color-content-bg), white 2%); } [data-theme="dark"] .md-related-content--grid .md-related-content-item, [data-theme="dark"] .md-related-content--list .md-related-content-item { background: color-mix(in srgb, var(--color-content-bg), white 2%); } .md-related-content-editor.md-related-content--grid .md-related-content-item, .md-related-content-editor.md-related-content--list .md-related-content-item { cursor: default; } .md-related-content-editor .md-related-content-upload { align-items: center; background: color-mix(in srgb, var(--color-text), transparent 92%); border: 1px dashed color-mix(in srgb, var(--color-border), transparent 30%); color: var(--color-text-sec); display: flex; height: 100%; justify-content: center; min-height: 6rem; width: 100%; }