remark-frontmatter-starter

:root { --img-h: 180px; /* <— one knob for image height */ --card-max-w: 900px; /* <— one knob for how wide each card may grow */ } .yt-card { margin:1rem 0; font-family:system-ui,sans-serif; max-width:var(--card-max-w); } .yt-link { text-decoration:none; } .yt-link h2 { margin:0 0 .5rem; font-style:italic; } .yt-link:hover h2, .yt-link:focus-visible h2 { color:orange; outline:none; } /* Row layout */ .yt-flex { display:flex; gap:1rem; align-items:center; flex-wrap:nowrap; } /* Same‑height images */ .yt-thumb, .yt-banner { height:var(--img-h); object-fit:contain; } /* Circular thumb with locked width */ .yt-thumb { width:var(--img-h); border-radius:50%; flex:0 0 var(--img-h); } /* Banner can grow but never exceed the card’s max‑width minus thumb+gap */ .yt-banner { width:auto; max-width:calc(100% - var(--img-h) - 1rem); flex:1 1 auto; } /* Phone fallback: stack vertically */ @media (max-width:550px) { .yt-flex { flex-wrap:wrap; } .yt-thumb, .yt-banner { width:100%; height:auto; } }