It doesn't necessarily have to be semantic, but your visual styling should be in your style sheet. I'd do the following to achieve http://i.stack.imgur.com/cuCY0.png (assuming box model border box):

.story-large { width: 50%; @include scut-ratio-box; }

.story-small { width: 25%; @include scut-ratio-box; }

etc. I actually did something similar in production creating the Microsoft Surface 2 launch site in 2013: http://mikemaccana.com/images/work/screenshots/uncompromise-...