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:


card.small {
  --img-width: 100px;
  --img-height: 70px;
  --font-size: 0.6em;
}

What's interesting about this is I'm using a class small 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 card. As long as those variables are maintained I can change the design of card and everything should keep working across the site.

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