.grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 50px;
}

.grid-item {
    padding: 10px 0;
}

.area-speech-bubble {
    grid-column: 1 / span 2;
    grid-row: 1;
    background-color: #ddf0fa;
    border-radius: 20px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
}

.down-point {
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 70px solid #ddf0fa;
    position: relative;
    bottom: -40%;
    left: 25%;
    transform: rotate(-25deg);
    margin-top: -50px;
}

.score-text {
    color: #03436b;
    font-size: 16px;
    flex-basis: 100%;
    text-align: center;
    margin: 10px 0;
}

.side {
    flex-basis: 25%;
}

.side-top {
    border-bottom: rgba(3,67,107, 0.3) solid 5px;
    height: 50%;
}
.side-bottom {
    border-top: rgba(3,67,107, 0.2) solid 5px;
    height: 50%;
}

.score {
    flex-basis: 50%;
    color: #03436b;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

.area-wizard {
    grid-column: 1 / span 2;
    grid-row: 2 / span 3;
}

.wizard {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    display: block;
}

.area-description {
    grid-column: 3 / span 5;
    grid-row: 1 / span 3;
    padding-top: 0;
}

.actions {
    margin-top: 30px;
}

.action {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    margin: 0 auto 10px auto;
    padding: 0 10px 0 10px;
    width: 70%;
}

.action-score {
    padding-left: 10px;
    font-weight: bold;
}

.red-action {
    border: #555 solid 2px;
    color: #555;
    background-color: #ddd;
}

.green-action {
    border: #00612D solid 2px;
    color: #00612D;
    background-color: #B8E3D0;
}

.image-resource {
    text-align: center;
    color: #aaa;
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .area-speech-bubble {
        grid-column: 1 / span 2;
        grid-row: 1;
    }
    .area-wizard {
        grid-column: 1 / span 2;
        grid-row: 2;
    }
    .area-description {
        grid-column: 1 / span 2;
        grid-row: 3;
    }

}