<p>Youtube's design isn't too difficult once you figure out they're a giant video with a ton of tiles for everything.  Related video tiles weirdly come in two sizes, so I just shrink them with this:</p>

<pre>
<code class="language-css">
card.small {
  --img-width: 100px;
  --img-height: 70px;
  --font-size: 0.6em;
}
</code>
</pre>

<p>What's interesting about this is I'm using a class <b>small</b> to tag those small cards (aka tiles) but I'm changing their dimensions through the use of CSS variables.  The alternative is to alter the CSS settings, but with this I don't have to remember to find everywhere I did that if I ever change the <b>card</b>.  As long as those variables are maintained I can change the design of <b>card</b> and everything should keep working across the site.
</p>

<p>I think of this as being closer to how you can subclass in an Object Oriented Programming language.  I'm "subclassing" the base <b>card</b> to create <b>card.small</b> and then changing the variables to define what this new variant means.</p>