.game-page {
    display: grid;
    grid-column-gap: 50px;
    grid-template-columns: clamp(450px, 30vw, 600px) 1fr;
}


.game-summary {
    display: flex;
    gap: 40px;
    flex-direction: column;
}


.final, .timeline {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}


.timeline progress {
    max-width: 80%;
}

.final-score {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 20px 1fr;
    justify-content: center;
    grid-gap: 20px;
}

.final-score .score {
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: center;
}


.final-score .score h3 {
    font-size: 4rem;
}


@media screen and (max-width: 768px) {

    .game-page {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

}