Note on narrow screens where there is no room for all the logos, this falls back to a stacked list of text.
Since this is included on every page, and likely one of the logos is repeated at the to, this is a good candidate for svg sprites, as shown here.
TODO: best way of copying / referencing the original file from node_modules to somewhere public - or suggest CDN link?
TODO: rewrite using flex-basis so we can scale fluidly by width while maintaining height proportions
<footer class="c-logo-panel" role="banner">
<div class="o-container">
<h4 class="c-logo-panel__title">The Science Museum Group</h4>
<div class="c-logo-panel__items">
<a href="https://www.sciencemuseum.org.uk" class="c-logo-panel__item">
<div class="c-logo-panel__text">Science Museum</div>
<svg aria-hidden="true" width="398" height="236" viewBox="0 0 398 154" class="c-logo--scm" preserveAspectRatio="xMinYMin meet">
<use xlink:href="../../assets/logos/sprite.symbol.svg#scm"></use>
</svg>
</a>
<a href="http://www.railwaymuseum.org.uk" class="c-logo-panel__item">
<div class="c-logo-panel__text">National Railway Museum</div>
<svg aria-hidden="true" width="379" height="236" viewBox="0 0 379 154" class="c-logo--nrm" preserveAspectRatio="xMinYMin meet">
<use xlink:href="../../assets/logos/sprite.symbol.svg#nrm"></use>
</svg>
</a>
<a href="https://www.scienceandindustrymuseum.org.uk" class="c-logo-panel__item">
<div class="c-logo-panel__text">Science and Industry Museum</div>
<svg aria-hidden="true" width="448" height="236" viewBox="0 0 448 236" class="c-logo--sim" preserveAspectRatio="xMinYMin meet">
<use xlink:href="../../assets/logos/sprite.symbol.svg#sim"></use>
</svg>
</a>
<a href="https://www.scienceandmediamuseum.org.uk" class="c-logo-panel__item">
<div class="c-logo-panel__text">National Science and Media Museum</div>
<svg aria-hidden="true" width="448" height="236" viewBox="0 0 448 236" class="c-logo--nsmm" preserveAspectRatio="xMinYMin meet">
<use xlink:href="../../assets/logos/sprite.symbol.svg#nsmm"></use>
</svg>
</a>
<a href="https://www.locomotion.org.uk/" class="c-logo-panel__item">
<div class="c-logo-panel__text">Locomotion</div>
<svg aria-hidden="true" width="544" height="236" viewBox="0 0 544 70" class="c-logo--loco" preserveAspectRatio="xMinYMin meet">
<use xlink:href="../../assets/logos/sprite.symbol.svg#loco"></use>
</svg>
</a>
<a href="https://hirethescienceinnovationpark.com/" class="c-logo-panel__item">
<div class="c-logo-panel__text">Science and Innovation Park</div>
<svg aria-hidden="true" width="532" height="236" viewBox="0 0 532 236" class="c-logo--sip" preserveAspectRatio="xMinYMin meet">
<use xlink:href="../../assets/logos/sprite.symbol.svg#sip"></use>
</svg>
</a>
</div>
</div>
</footer>
<footer class="c-logo-panel" role="banner">
<div class="o-container">
<h4 class="c-logo-panel__title">{{strap}}</h4>
<div class="c-logo-panel__items">
{{#each links}}
<a href="{{url}}" class="c-logo-panel__item">
<div class="c-logo-panel__text">{{name}}</div>
<svg aria-hidden="true" width="{{ width }}" height="236" viewBox="0 0 {{ width }} {{ height }}"
class="c-logo--{{@key}}" preserveAspectRatio="xMinYMin meet">
<use xlink:href="{{path '/assets/logos/sprite.symbol.svg'}}#{{ @key }}"></use>
</svg>
</a>
{{/each}}
</div>
</div>
</footer>