.how-to-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}.how-to-card{min-width:0;padding:0;border:.5px solid var(--border);border-radius:var(--radius-card);background:var(--background);overflow:hidden;transition:background .15s ease-out}.how-to-card-link{display:flex;flex-direction:column;height:100%;border-radius:inherit;color:inherit;text-decoration:none}.how-to-card-link:focus-visible{outline:2px solid var(--brand-icon);outline-offset:-2px}.how-to-card-thumb{position:relative;flex:0 0 auto;aspect-ratio:16 / 9;background:var(--background-dark);overflow:hidden}.how-to-card-thumb img{display:block;width:100%;height:100%;object-fit:cover}.how-to-card-thumb:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(var(--overlay-on-media-rgb),.16)}.how-to-play-glyph{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;color:var(--text-on-color);filter:drop-shadow(0 2px 8px rgba(var(--shadow-rgb),.45));pointer-events:none}.how-to-card-duration{position:absolute;right:12px;bottom:12px;z-index:1;padding:2px 6px;border-radius:6px;background:rgba(var(--overlay-on-media-rgb),.72);color:var(--text-on-color);font-variant-numeric:tabular-nums}.how-to-card-copy{display:flex;flex:1;flex-direction:column;padding:24px}.how-to-card-title{margin:0 0 12px;color:var(--text-primary)}.how-to-card-description{margin:0;color:var(--text-secondary)}.how-to-card-meta{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;color:var(--text-secondary)}.how-to-card-meta>span{color:inherit}.how-to-card-meta .how-to-card-topic{display:inline-flex;align-items:center;gap:6px;min-width:0}.how-to-card-meta svg{display:block;flex-shrink:0}.how-to-card-meta .how-to-card-watch{display:inline-flex;align-items:center;gap:2px;margin-left:auto;color:var(--brand-icon)}@media (hover: hover){.how-to-card:hover{background:var(--background-dark)}}@media (max-width: 1100px){.how-to-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 640px){.how-to-card-grid{grid-template-columns:minmax(0,1fr);gap:20px}.how-to-card-copy{padding:20px}}.how-to-card-compact .how-to-card-copy{padding:14px 16px 16px}.how-to-card-compact .how-to-card-title{margin:0}