.match-grid {
    display: grid;
    grid-template-areas:
                "match_name match_name match_name match_date"
                "equipe_1 score_1 score_2 equipe_2";

    grid-template-columns: 1fr 28px 28px 1fr;
    text-align: center;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
}

.match_name {
    grid-area: match_name;
    background-color: #f0f0f0;
    padding-block: 5px;
    font-weight: bold;
}

.match_date {
    grid-area: match_date;
    background-color: #f0f0f0;
    padding-block: 5px;
    font-weight: bold;
}
.match_date svg{
    width: 18px;
    height: 18px;
}

.equipe_1 {
    grid-area: equipe_1;
    padding-block: 5px;
}

.equipe_2 {
    grid-area: equipe_2;
}

.score {
    font-weight: bold;
}

.score.win {
    color: green;
}

.score.lose {
    color: red;
}

.score.null {
    color: gray;
}

.score.crime {
    color: purple;
}

.score_1 {
    grid-area: score_1;
}

.score_2 {
    grid-area: score_2;
}

.left {
    text-align: left;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}