@import 'colours.less';

.player-box {
    display: grid;

    grid-template-areas:
        "score"
        "img"
        "ctrl";

    &.top {
        grid-template-areas:
            "ctrl"
            "img"
            "score";

        .img {
            display: flex;
            flex-flow: column;
            justify-content: flex-end;
        }
    }

    grid-template-rows: min-content 1fr min-content;

    .score {
        grid-area: score;
    }

    .img {
        grid-area: img;
    }

    .ctrl {
        grid-area: ctrl;
    }
}