Editing Template:Paired list stack

<includeonly>{{#if:{{{label|}}}|<div id="{{{label id|{{anchorencode:{{{label}}}}}}}}" style="text-align: center; font-weight: bold;">{{{label}}}</div>}}<dl {{#if:{{{label|}}}|aria-labelledby="{{{label id|{{anchorencode:{{{label}}}}}}}}"}} style="margin: 5px; border-top: 1px solid {{{border color|#c8ccd1}}}; border-left: 1px solid {{{border color|#c8ccd1}}}; border-right: 1px solid {{{border color|#c8ccd1}}}; border-radius: 3px; padding-bottom: 1px; overflow: hidden; text-align: center;">
    <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
        <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 1|}}}
        <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 1|}}}
    </div>
{{#if:{{{key 2|}}}|
    <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
        <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 2}}}
        <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 2|}}}
    </div>
}}{{#if:{{{key 3|}}}|
    <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
        <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 3}}}
        <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 3|}}}
    </div>
}}{{#if:{{{key 4|}}}|
    <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
        <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 4}}}
        <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 4|}}}
    </div>
}}{{#if:{{{key 5|}}}|
    <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
        <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 5}}}
        <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 5|}}}
    </div>
}}{{#if:{{{key 6|}}}|
    <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
        <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 6}}}
        <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 6|}}}
    </div>
}}{{#if:{{{key 7|}}}|
    <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
        <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 7}}}
        <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 7|}}}
    </div>
}}
</dl></includeonly><noinclude>Displays a stack containing key-value pairs.

Mimics a table layout, but rearranges itself to better fit on small viewports (mobile).

== Example ==
<pre>
{{paired list stack
 | key background color = lightblue
 | border color = darkblue
 | key 1   = 1986
 | value 1 = Dragon Quest Suite
 | key 2   = 1987
 | value 2 = Dragon Quest II Suite<br>Dragon Quest in Concert (Family Classic Concert)
 | key 3   = 1988
 | value 3 = Dragon Quest III Symphonic Suite (NHK Symphony Orchestra)<br>Dragon Quest III Naoshi Kougami Vocal<br>Dragon Quest in Brass<br>March Dragon Quest III<br>Dragon Quest on Electone<br>Dragon Quest in Concert (Family Classic Concert 2)
}}
</pre>

{{paired list stack
 | key background color = lightblue
 | border color = darkblue
 | key 1   = 1986
 | value 1 = Dragon Quest Suite
 | key 2   = 1987
 | value 2 = Dragon Quest II Suite<br>Dragon Quest in Concert (Family Classic Concert)
 | key 3   = 1988
 | value 3 = Dragon Quest III Symphonic Suite (NHK Symphony Orchestra)<br>Dragon Quest III Naoshi Kougami Vocal<br>Dragon Quest in Brass<br>March Dragon Quest III<br>Dragon Quest on Electone<br>Dragon Quest in Concert (Family Classic Concert 2)
}}

Appearance in narrow viewports:
<div style="max-width: 360px;">
{{paired list stack
 | key background color = lightblue
 | border color = darkblue
 | key 1   = 1986
 | value 1 = Dragon Quest Suite
 | key 2   = 1987
 | value 2 = Dragon Quest II Suite<br>Dragon Quest in Concert (Family Classic Concert)
 | key 3   = 1988
 | value 3 = Dragon Quest III Symphonic Suite (NHK Symphony Orchestra)<br>Dragon Quest III Naoshi Kougami Vocal<br>Dragon Quest in Brass<br>March Dragon Quest III<br>Dragon Quest on Electone<br>Dragon Quest in Concert (Family Classic Concert 2)
}}
</div>
[[Category:List templates]]</noinclude>