.wrap {
    border: 1px dotted black;
    padding: 2px;
    display: inline-block;
    text-align: left;
}

.type-a1 {
    color: #629FD3;
    background-color: #0F2E07;
    padding: 8px;
}

.type-a2 {
    background-color: #629FD3;
    color: #0F2E07;
    padding: 8px;
}

.type-b1 {
    color: #7D1E24;
    background-color: #C7FB28;
    padding: 8px;
}


.type-b2 {
    background-color: #7D1E24;
    color: #C7FB28;
    padding: 8px;
}

.type-c1 {
    background-color: #FB1A61;
    color: #010248;
    padding: 8px;
}

.type-c2 {
    color: #FB1A61;
    background-color: #010248;
    padding: 8px;
}

.type-d1 {
    color: #D2490F;
    background-color: #060410;
    padding: 8px;
}

.type-d2 {
    background-color: #D2490F;
    color: #060410;
    padding: 8px;
}