Controlling CSS Grid templates using custom CSS properties

Imagine that you want to emphasize the importance of the textual descriptions of videos, so you would like to increase the amount of space for text, and most likely decrease the amount of space used for the video. This could be implemented using a dynamic viewer using some TypeScript logic, which could perform the sizing calculations on the fly. Given that you would like to be able to view the content on your mobile phone as well, you would need to implement considerations for the grid layout on smaller screens. This additional requirement would be complex enough that custom theming would be required. However, as it turns out, we can combine media queries with inline custom CSS properties in a manner that is both compact and easy to understand.

If we introduce the video and text CSS classes for the course video tiles, then we can style them using custom CSS properties and CSS Grid techniques while referencing the container...