Image gallery in article styling problem

[woowoowoo]

At some point in the upgrade path, image galleries on blogs.unimelb stopped working. You can see from the screenshot that the images don't 'tile' correctly. Blogs is probably the only place where image galleries are used inside articles, so it's not a common problem.

List items in image galleries are 100% width by default:

.uomcontent [role=main] .image-gallery li {width: 100%;}

with overrides for media queries:

@media screen and (min-width: 481px)
.uomcontent [role=main] .image-gallery li {
    width: 50%;
}
@media screen and (min-width: 769px)
.uomcontent [role=main] .image-gallery li {
    width: 25%;
}

But it all gets messed up when inside an article, by this style:

.uomcontent article.news .article li {
    width: 100%;
}

which overrides the others because of source order.

I have restored order by adding the custom css:

<style>
article.news .article .image-gallery li {width:100%;}
@media screen and (min-width: 481px) {
    article.news .article .image-gallery li {width:50%;}
}
@media screen and (min-width: 769px) {
    article.news .article .image-gallery li {width:25%;}
}
</style>

but it's not ideal. If this clash could be addressed at some point, it would be sweet :-)