Example of how to style bespoke layouts for different viewports

conventional-example.html

<!-- This method requires you to append a suffix to each utility class in your css and gets tedious -->

<div class="span-1/5-tablet span-1/4-desktop">...</div>
<div class="span-4/5-tablet span-1/4-desktop">...</div>
<div class="span-2/4-desktop">...</div>

new-example.html

<!-- This method is clean and easy to write. It also -->

<div span="1/5{{tablet}} 1/4{{desktop}}">...</div>
<div span="4/5{{tablet}} 1/4{{desktop}}">...</div>
<div span="2/4{{desktop}}">...</div>


<!-- which would add a class dynamically in the browser -->
<div span="1/5">...</div>

verbose-example.html

<!-- One way to achieve this outcome but the technique is so verbose  -->

<style>
    @media (--mobile) {
        #element1, #element2, #element3 {
            /* full width */
        }
    }
    @media (--tablet) {
        #element1 {
            width: 20%;
        }
        #element2 {
            width: 80%;
        }
    }
    
    @media (--tablet) {
        #element1 {
            width: 25%;
        }
        #element2 {
            width: 25%;
        }
        #element3 {
            width: 50%;
        }
    }
</style>

<div id="element-1">...</div>
<div id="element-2">...</div>
<div id="element-3">...</div>