/*******************/
/*platform*/

.platform {
    display: flex;
    flex-direction: column;
}

.platform-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
    margin-bottom: 5%;
    margin-top: 5%;
}
/**********/
/**demonstration*/
.demonstration {
    background: linear-gradient(to right, var(--orange), var(--blue));
    border-radius: 5px;
}

.demonstration-item p {
    color: white;
    font-size: 1.2em;
}

.demonstration-item h2 {
    margin-bottom: 5%;
}

.demonstration-button {
    margin-top: 5%;
    margin-bottom: 5%;
}

.demonstration-button a {
    padding-left: 20%;
    padding-right: 20%;
    padding-bottom: 5%;
    padding-top: 5%;
}
/*************/


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



    /**************************/
    /*********platform**********/
    .platform {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    .platform-item {
        float: left;
        width: 23%;
        margin-left: 1%;
        margin-right: 1%;
    }



    /**************************/
    /****demonstration*********/
    .demonstration-item {
        float: left;
        width: 60%
    }

    .demonstration-button {
        width: 30%;
        float: right;
        /*   margin-top: 5%;*/
    }
}