Refine CSS to be mobile-first

[Logiqx]

CSS should really start with lo-res devices and move up to larger devices.

It might also be worth structuring it a bit more list the CSS in wst-results, grouping everything relating to specific column classes.

It might make sense to use variables for some things?

See Responsive Web Design - Media Queries at W3Schools.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

[Logiqx]

Might also wish to align with the wst-results CSS