<style>
.numbers, .country {
border-bottom: 1px solid rgb(150,150,150);
display: grid;
grid-template-columns: 50% 50%;
}
.country {
background: rgb(252,252,252);
position: relative;
}
.name {
position: absolute;
top: 3px;
left: 3px;
font-size: 13px;
color: rgb(100,100,100);
width: 130px;
}
.releasedNumber {
text-align: right;
}
.detained, .detainedNumber {
border-right: 2px solid black;
}
.detained, .released {
display: inline-block;
display: grid;
grid-gap: 1px;
grid-template-rows: repeat(5,8px);
grid-template-columns: repeat(auto-fill,8px);
grid-auto-flow: column;
}
.detained {
justify-content: right;
direction: rtl;
}
.detainee {
background-color: #ffd289;
width: 8px;
}
.detained .dead, .key .dead {
background-color: #7c152a;
}
.key .detainee {
width: 9px;
height: 9px;
display: inline-block;
}
.key {
font-size: 13px;
color: rgb(100,100,100);
}
@media screen and (max-width: 900px) {
.detained, .released {
grid-template-rows: repeat(10,8px);
grid-template-columns: repeat(auto-fill,8px);
}
}
@media screen and (max-width: 400px) {
.detained, .released {
grid-template-rows: repeat(13,8px);
grid-template-columns: repeat(auto-fill,8px);
}
}
</style>