@media (min-width: 769px) {
    .btn-more-details {
        width:20%;
    }
    #game-stripe {
        padding:1% 0 1% 0;
    }
    .game-card {
        flex: 1 1 0%; /* All collapsed share the 60% equally */
        margin-left: -4%; /* Overlap for the slashes */
    }

    .game-card:not(.active) h3{
        font-size:90%;
    }
    
    /* The dynamic width logic */
    .game-card.active {
        flex: 0 0 60% !important; /* Forces expanded to be 40% */
        z-index: 50;
        cursor: default;
    }

    /* Here we will have the logic for active elements in the middle */

    .game-card.first-card {
        clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--angle)) 100%, 0% 100%)
    }

    .game-card.mid-card {
        clip-path: polygon(var(--angle) 0%, 100% 0%, calc(100% - var(--angle)) 100%, 0% 100%);
    }

    .game-card.last-card {
        clip-path: polygon(var(--angle) 0%, 100% 0%, 100% 100%, 0% 100%)
    }

    .first-card {
        margin-left: 0;
    }
}