/* Compact discovery cards on the homepage and at the end of an article. */
.guide-section{padding-block:32px 40px}
.related-posts.pro-article-related{padding-bottom:0;margin-bottom:36px}
.article-shell[data-article-experience]~.related-posts.pro-article-related{padding-top:10px;margin-bottom:36px}
:is(.guide-section,.pro-article-related) .section-heading{align-items:center;gap:20px;margin-bottom:20px}
:is(.guide-section,.pro-article-related) .section-heading .eyebrow{font-size:10px;line-height:1.5;letter-spacing:.1em;margin-bottom:7px}
.guide-section .section-heading h2,.related-posts.pro-article-related .section-heading #related-heading{font-size:24px;line-height:1.4;letter-spacing:-.03em;margin:0;font-weight:600}
:is(.guide-section,.pro-article-related) .section-heading .text-link{font-size:12px;font-weight:600;gap:7px;white-space:nowrap}
:is(.guide-section,.pro-article-related) .section-heading .text-link .icon{width:15px;height:15px}
:is(.guide-section,.pro-article-related) .post-grid{gap:16px}
.guide-section .post-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
:is(.guide-section,.pro-article-related) .post-card{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:0;padding:16px;border:1px solid var(--color-border);border-radius:16px;box-shadow:0 3px 14px rgba(25,40,75,.025);overflow:hidden;transform:none;transition:border-color .2s,box-shadow .2s}
:is(.guide-section,.pro-article-related) .post-card:hover{transform:none;border-color:color-mix(in srgb,var(--color-accent) 30%,var(--color-border));box-shadow:0 5px 18px rgba(25,40,75,.045)}
:is(.guide-section,.pro-article-related) .post-card .post-card-image{width:128px;height:128px;aspect-ratio:1;border-radius:11px;margin:0;overflow:hidden}
:is(.guide-section,.pro-article-related) .post-card .post-card-image>a{display:block;width:100%;height:100%;border-radius:inherit}
:is(.guide-section,.pro-article-related) .post-card .post-card-image img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
:is(.guide-section,.pro-article-related) .post-card .post-card-body{display:flex;flex-direction:column;min-width:0;align-self:stretch;padding:3px 0 3px 18px;border-radius:0}
:is(.guide-section,.pro-article-related) .post-card .post-category{font-size:9px;line-height:1.5;letter-spacing:.06em;font-weight:700;margin:0}
:is(.guide-section,.pro-article-related) .post-card .post-card-title{font-size:19px;line-height:1.5;letter-spacing:-.025em;font-weight:600;margin:7px 0 12px;overflow-wrap:break-word}
:is(.guide-section,.pro-article-related) .post-card .post-card-meta{display:flex;flex-wrap:wrap;gap:5px 11px;margin-top:auto;padding-top:0;font-size:10px;line-height:1.7;color:var(--color-muted)}
:is(.guide-section,.pro-article-related) .post-card .post-read-time{display:inline-flex;align-items:center;gap:4px}
:is(.guide-section,.pro-article-related) .post-card .post-read-time .icon{width:11px;height:11px}
:is(.guide-section,.pro-article-related) .post-card .post-card-image .bookmark-button{top:6px;right:6px;width:26px;height:26px;min-width:26px;min-height:26px;padding:6px;border-radius:8px;border-color:color-mix(in srgb,var(--color-border) 75%,transparent);box-shadow:0 2px 6px rgba(25,40,75,.07)}
:is(.guide-section,.pro-article-related) .post-card .bookmark-button .icon{width:13px;height:13px}
.related-posts.pro-article-related .post-card{grid-template-columns:88px minmax(0,1fr);padding:15px}
.related-posts.pro-article-related .post-card .post-card-image{width:88px;height:100px}
.related-posts.pro-article-related .post-card .post-card-body{padding:0 0 0 14px}
.related-posts.pro-article-related .post-card .post-card-title{font-size:16px;line-height:1.55;margin:6px 0 10px}
.related-posts.pro-article-related .post-card .post-card-meta{gap:4px 8px;font-size:10px}
.guide-section .post-card{grid-template-columns:96px minmax(0,1fr)}
.guide-section .post-card .post-card-image{width:96px;height:112px}
.guide-section .post-card .post-card-body{padding-left:14px}
.guide-section .post-card .post-card-title{font-size:17px}
[data-theme=dark] :is(.guide-section,.pro-article-related) .post-card{box-shadow:0 3px 14px rgba(0,0,0,.08)}
[data-theme=dark] :is(.guide-section,.pro-article-related) .post-card:hover{box-shadow:0 5px 18px rgba(0,0,0,.12)}
@media(max-width:1100px){
 .guide-section .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .related-posts.pro-article-related .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .guide-section .post-card{grid-template-columns:104px minmax(0,1fr)}
 .guide-section .post-card .post-card-image{width:104px;height:116px}
 .guide-section .post-card .post-card-title{font-size:17px}
}
@media(max-width:760px){
 .guide-section{padding-block:25px 30px}
 .related-posts.pro-article-related,.article-shell[data-article-experience]~.related-posts.pro-article-related{margin-bottom:28px}
 .guide-section .section-heading h2,.related-posts.pro-article-related .section-heading #related-heading{font-size:21px}
 :is(.guide-section,.related-posts.pro-article-related) .section-heading{gap:12px;align-items:flex-start;margin-bottom:16px}
 :is(.guide-section,.related-posts.pro-article-related) .section-heading .text-link{font-size:11px;align-self:center}
 :is(.guide-section,.related-posts.pro-article-related) .post-grid{grid-template-columns:1fr;gap:12px}
 :is(.guide-section,.related-posts.pro-article-related) .post-card{grid-template-columns:92px minmax(0,1fr);padding:13px;border-radius:14px}
 :is(.guide-section,.related-posts.pro-article-related) .post-card .post-card-image{width:92px;height:102px;border-radius:9px}
 :is(.guide-section,.related-posts.pro-article-related) .post-card .post-card-body{padding:0 0 0 14px}
 :is(.guide-section,.related-posts.pro-article-related) .post-card .post-card-title{font-size:16px;line-height:1.5;margin:5px 0 10px}
 :is(.guide-section,.related-posts.pro-article-related) .post-card .post-card-meta{font-size:10px;gap:4px 8px}
}
@media(max-width:430px){
 :is(.guide-section,.related-posts.pro-article-related) .section-heading{flex-wrap:wrap;gap:10px}
 :is(.guide-section,.related-posts.pro-article-related) .section-heading .text-link{align-self:auto}
 :is(.guide-section,.related-posts.pro-article-related) .post-card{grid-template-columns:76px minmax(0,1fr);padding:12px}
 :is(.guide-section,.related-posts.pro-article-related) .post-card .post-card-image{width:76px;height:92px}
 :is(.guide-section,.related-posts.pro-article-related) .post-card .post-card-body{padding-left:12px}
 :is(.guide-section,.related-posts.pro-article-related) .post-card .post-card-title{font-size:15px}
}
@media(prefers-reduced-motion:reduce){:is(.guide-section,.pro-article-related) .post-card{transition:none}}