.province-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    &.our-side {
        justify-content: flex-end;
        margin: auto;
    }
}

.province-deck {
    margin: 5px;

    &.our-side {
        justify-content: flex-start;
    }

    .popup {
        position: absolute;
        min-height: 92px;
        min-width: 168px;
        left: 90px;
        top: -75px;

        .inner {
            columns: 2;
            min-height: 128px;

            .card-wrapper {
                margin: 5px 0 0 0;
            }
        }

        &.hidden {
            display: none;
        }

    }
}

.province-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    &.our-side {
        justify-content: flex-end;
        margin: auto;
    }
}

.province-deck {
    margin: 5px;

    &.our-side {
        justify-content: flex-start;
    }

    .popup {
        position: absolute;
        min-height: 92px;
        min-width: 180px;
        left: 90px;
        top: -75px;

        .inner {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: flex-start;
            min-height: 128px;

            .card-wrapper {
                margin: 5px 0 0 0;
            }
        }

        &.hidden {
            display: none;
        }
    }

    &.large {
        .popup {
            min-width: 240px
        }
    }

    &.x-large {
        .popup {
            min-width: 320px
        }
    }
}

Use flex layout in province deck popup
Use flex layout in province deck popup

Removed the column CSS layout from province deck popup due to a Chrome bug not displaying images in further columns properly and replaced it with flexbox instead.
