/* binnie-drawing CSS */

figure{margin-bottom: 2em;}
figcaption{font-size: 0.875em; font-weight:normal; }
.dl{margin-bottom: 1.5em;}
.draw{display: flex; flex-flow: row wrap; justify-content: space-around; align-items: flex-end;}
#gcr{flex-basis: 100%;}
#ser{flex-basis: 42.5%;}
#maw{flex-basis: 53.8%;}
#acid{flex-basis: 45%;}
#taf{flex-basis: 48%;}
#mo3{flex-basis: 66.7%;}
#mob{flex-basis: 64.6%;}
#coke{flex-basis: 45.3%;}
#nlr{flex-basis: 46.8%;}
#s97{flex-basis: 63.4%;}
#lsw{flex-basis: 62.8%;}
#srb4{flex-basis: 60.9%;}
#ter{flex-basis: 63.4%;}
.ng20{flex-basis: 40%}
.ng24{flex-basis: 48%}
.ng30{flex-basis: 60%}
.ng40{flex-basis: 80%}
.ng50{flex-basis: 100%}

@media only screen and (min-width: 30em ){figcaption{font-size: 1em;}}
@media only screen and (min-width: 40em ){figcaption{font-weight: bold;}}

@media only screen and (min-width: 56em ) {
#gcr{flex-basis: 45.7em; order: 1;}
#ser{flex-basis: 19.4em; order: 3;}
#maw{flex-basis: 24.6em; order: 13;}
#acid{flex-basis: 20.6em; order: 5;}
#taf{flex-basis: 22.2em; order: 11;}
#mo3{flex-basis: 30.5em; order: 2;}
#mob{flex-basis: 29.5em; order: 4;}
#coke{flex-basis: 20.7em; order: 7;}
#nlr{flex-basis: 21.4em; order: 9;}
#s97{flex-basis: 29em; order: 8;}
#lsw{flex-basis: 28.7em; order: 10;}
#srb4{flex-basis: 27.8em; order: 12;}
#ter{flex-basis: 29em; order: 6;}
}

@media only screen and (min-width: 84em ) {
#ser{order: 10;}
#maw{order: 11;}
#acid{order: 2;}
#taf{order: 6;}
#mo3{order: 4;}
#mob{order: 3;}
#coke{order: 12;}
#nlr{order: 13;}
#s97{order: 8;}
#lsw{order: 9;}
#srb4{order: 7;}
#ter{order: 5;}
.ng20{flex-basis: 28%}
.ng24{flex-basis: 33.6%}
.ng30{flex-basis: 42%}
.ng40{flex-basis: 56%}
.ng50{flex-basis: 70%}
}