<!DOCTYPE html>
<style>
body {
background-color: slategray;
margin: 40px;
}
.row {
width: 620px;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 10px auto;
}
.unit {
width: 51px;
height: 51px;
background-repeat: no-repeat;
border-style: solid;
border-width: 3px;
box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
background-image: url(../units.svg);
}
.unit.italian {
background-color: #f9e3b3;
border-color: dimgray;
}
.unit.german {
background-color: #abba8e;
border-color: dimgray;
}
.unit.allied {
background-color: #e4d1ab;
border-color: tan;
}
.unit.u0{background-position:-0px -0px}
.unit.u1{background-position:-51px -0px}
.unit.u2{background-position:-102px -0px}
.unit.u3{background-position:-153px -0px}
.unit.u4{background-position:-204px -0px}
.unit.u5{background-position:-255px -0px}
.unit.u6{background-position:-306px -0px}
.unit.u7{background-position:-357px -0px}
.unit.u8{background-position:-408px -0px}
.unit.u9{background-position:-459px -0px}
.unit.u10{background-position:-0px -51px}
.unit.u11{background-position:-51px -51px}
.unit.u12{background-position:-102px -51px}
.unit.u13{background-position:-153px -51px}
.unit.u14{background-position:-204px -51px}
.unit.u15{background-position:-255px -51px}
.unit.u16{background-position:-306px -51px}
.unit.u17{background-position:-357px -51px}
.unit.u18{background-position:-408px -51px}
.unit.u19{background-position:-459px -51px}
.unit.u20{background-position:-0px -102px}
.unit.u21{background-position:-51px -102px}
.unit.u22{background-position:-102px -102px}
.unit.u23{background-position:-153px -102px}
.unit.u24{background-position:-204px -102px}
.unit.u25{background-position:-255px -102px}
.unit.u26{background-position:-306px -102px}
.unit.u27{background-position:-357px -102px}
.unit.u28{background-position:-408px -102px}
.unit.u29{background-position:-459px -102px}
.unit.u30{background-position:-0px -153px}
.unit.u31{background-position:-51px -153px}
.unit.u32{background-position:-102px -153px}
.unit.u33{background-position:-153px -153px}
.unit.u34{background-position:-204px -153px}
.unit.u35{background-position:-255px -153px}
.unit.u36{background-position:-306px -153px}
.unit.u37{background-position:-357px -153px}
.unit.u38{background-position:-408px -153px}
.unit.u39{background-position:-459px -153px}
.unit.u40{background-position:-0px -204px}
.unit.u41{background-position:-51px -204px}
.unit.u42{background-position:-102px -204px}
.unit.u43{background-position:-153px -204px}
.unit.u44{background-position:-204px -204px}
.unit.u45{background-position:-255px -204px}
.unit.u46{background-position:-306px -204px}
.unit.u47{background-position:-357px -204px}
.unit.u48{background-position:-408px -204px}
.unit.u49{background-position:-459px -204px}
.unit.u50{background-position:-0px -255px}
.unit.u51{background-position:-51px -255px}
.unit.u52{background-position:-102px -255px}
.unit.u53{background-position:-153px -255px}
.unit.u54{background-position:-204px -255px}
.unit.u55{background-position:-255px -255px}
.unit.u56{background-position:-306px -255px}
.unit.u57{background-position:-357px -255px}
.unit.u58{background-position:-408px -255px}
.unit.u59{background-position:-459px -255px}
.unit.u60{background-position:-0px -306px}
.unit.u61{background-position:-51px -306px}
.unit.u62{background-position:-102px -306px}
.unit.u63{background-position:-153px -306px}
.unit.u64{background-position:-204px -306px}
.unit.u65{background-position:-255px -306px}
.unit.u66{background-position:-306px -306px}
.unit.u67{background-position:-357px -306px}
.unit.u68{background-position:-408px -306px}
.unit.u69{background-position:-459px -306px}
.unit.u70{background-position:-0px -357px}
.unit.u71{background-position:-51px -357px}
.unit.u72{background-position:-102px -357px}
.unit.u73{background-position:-153px -357px}
.unit.u74{background-position:-204px -357px}
.unit.u75{background-position:-255px -357px}
.unit.u76{background-position:-306px -357px}
.unit.u77{background-position:-357px -357px}
.unit.u78{background-position:-408px -357px}
.unit.u79{background-position:-459px -357px}
.unit.u80{background-position:-0px -408px}
.unit.u81{background-position:-51px -408px}
.unit.u82{background-position:-102px -408px}
.unit.u83{background-position:-153px -408px}
.unit.u84{background-position:-204px -408px}
.unit.u85{background-position:-255px -408px}
.unit.u86{background-position:-306px -408px}
.unit.u87{background-position:-357px -408px}
.unit.u88{background-position:-408px -408px}
.unit.u89{background-position:-459px -408px}
.unit.u90{background-position:-0px -459px}
.unit.u91{background-position:-51px -459px}
.unit.u92{background-position:-102px -459px}
.unit.u93{background-position:-153px -459px}
</style>
<html>
<body>
<div id="units">
<div class="row">
<div class="unit italian u0"></div>
<div class="unit italian u1"></div>
<div class="unit italian u2"></div>
<div class="unit italian u3"></div>
<div class="unit italian u4"></div>
</div><div class="row">
<div class="unit italian u5"></div>
<div class="unit italian u6"></div>
<div class="unit italian u7"></div>
<div class="unit italian u8"></div>
<div class="unit italian u9"></div>
<div class="unit italian u10"></div>
<div class="unit italian u11"></div>
<div class="unit italian u12"></div>
<div class="unit italian u13"></div>
</div><div class="row">
<div class="unit german u14"></div>
<div class="unit german u15"></div>
<div class="unit german u16"></div>
<div class="unit german u17"></div>
<div class="unit german u18"></div>
<div class="unit german u19"></div>
</div><div class="row">
<div class="unit german u20"></div>
<div class="unit german u21"></div>
<div class="unit german u22"></div>
<div class="unit german u23"></div>
<div class="unit german u24"></div>
<div class="unit german u25"></div>
<div class="unit german u26"></div>
<div class="unit german u27"></div>
<div class="unit german u28"></div>
</div><div class="row">
<div class="unit german u29"></div>
<div class="unit german u30"></div>
<div class="unit german u31"></div>
<div class="unit german u32"></div>
<div class="unit german u33"></div>
</div>
<div class="row">
<div class="unit allied u34"></div>
<div class="unit allied u35"></div>
<div class="unit allied u36"></div>
<div class="unit allied u37"></div>
<div class="unit allied u38"></div>
<div class="unit allied u39"></div>
</div><div class="row">
<div class="unit allied u40"></div>
<div class="unit allied u41"></div>
<div class="unit allied u42"></div>
<div class="unit allied u43"></div>
<div class="unit allied u44"></div>
<div class="unit allied u45"></div>
<div class="unit allied u46"></div>
<div class="unit allied u47"></div>
<div class="unit allied u48"></div>
</div><div class="row">
<div class="unit allied u49"></div>
<div class="unit allied u50"></div>
<div class="unit allied u51"></div>
<div class="unit allied u52"></div>
<div class="unit allied u53"></div>
<div class="unit allied u54"></div>
<div class="unit allied u55"></div>
<div class="unit allied u56"></div>
<div class="unit allied u57"></div>
</div><div class="row">
<div class="unit allied u58"></div>
<div class="unit allied u59"></div>
<div class="unit allied u60"></div>
<div class="unit allied u61"></div>
<div class="unit allied u62"></div>
<div class="unit allied u63"></div>
<div class="unit allied u64"></div>
<div class="unit allied u65"></div>
<div class="unit allied u66"></div>
</div><div class="row">
<div class="unit allied u67"></div>
<div class="unit allied u68"></div>
<div class="unit allied u69"></div>
<div class="unit allied u70"></div>
<div class="unit allied u71"></div>
<div class="unit allied u72"></div>
<div class="unit allied u73"></div>
<div class="unit allied u74"></div>
<div class="unit allied u75"></div>
</div><div class="row">
<div class="unit allied u76"></div>
<div class="unit allied u77"></div>
<div class="unit allied u78"></div>
<div class="unit allied u79"></div>
<div class="unit allied u80"></div>
<div class="unit allied u81"></div>
<div class="unit allied u82"></div>
<div class="unit allied u83"></div>
<div class="unit allied u84"></div>
</div><div class="row">
<div class="unit allied u85"></div>
<div class="unit allied u86"></div>
<div class="unit allied u87"></div>
<div class="unit allied u88"></div>
<div class="unit allied u89"></div>
<div class="unit allied u90"></div>
<div class="unit allied u91"></div>
<div class="unit allied u92"></div>
<div class="unit allied u93"></div>
</div>