remark-frontmatter-starter

/* Adjustable knobs (can be overridden per‑card inline) */ :root { --img-h: 80px; /* shared height for thumb & banner */ --card-w: 450px; /* width of each card (banner auto‑fits inside) */ } /* Grid to hold multiple cards side‑by‑side */ .yt-grid { display:flex; flex-wrap:wrap; gap:2rem; justify-content:left; } /* Individual card */ .yt-card { width:var(--card-w); max-width:100%; font-family:system-ui,sans-serif; } /* Title link */ .yt-link { text-decoration:none; } .yt-link h3 { margin:.25rem 0 .75rem; font-style:italic; } .yt-link:hover h3, .yt-link:focus-visible h3 { color:orange; outline:none; } /* Row containing the two images */ .yt-flex { display:flex; align-items:center; gap:1rem; } /* Images — force same height everywhere */ .yt-thumb, .yt-banner { height:var(--img-h) !important; object-fit:contain; } /* Circular thumbnail (square because width == height) */ .yt-thumb { width:var(--img-h) !important; border-radius:50%; flex:0 0 var(--img-h); } /* Banner scales to fill remaining width */ .yt-banner { width:auto; flex:1 1 auto; } /* Phone fallback: stack vertically inside each card */ @media (max-width:600px) { .yt-flex { flex-direction:column; } .yt-thumb, .yt-banner { width:100% !important; height:auto !important; } }