@media only screen and (max-width: 600px) {
    #hero {
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }
    #hero .wrap {
        flex-direction: column;
    }

    #hero .heading {
        font-size: 2.4rem;
        text-align: left;
        margin-bottom: 50px;
    }

    #hero p {
        margin-bottom: 50px;
        font-size: 1.1rem;
    }

    #history {
        padding: 20px 20px;
    }

    #history .bmx-container {
        flex-direction: column-reverse;
    }

    #ecosystem .bmx-container {
        flex-direction: column;
    }

    #ecosystem h2 {
        line-height: 100%;
        font-size: 2.2rem;
    }

    #ecosystem img {
        max-width: 100%;
    }

    #feedback {
        padding: 50px 20px;
    }

    #feedback h2 {
        line-height: 130%;
    }

    #feedback .card-list {
        flex-direction: column;
        row-gap: 20px;
    }

    #feedback .card-list .card.center {
        transform: unset;
    }

    #feedback .card-list .card {
        padding: 20px;
    }

    #solution {
        height: 600px;
    }

    #solution .center {
        width: 140px;
        height: 140px;
        padding: 15px;
        font-size: 1rem;
    }

    #solution .circle {
        width: 280px;
        height: 280px;
    }

    #solution .satelite div {
        --radius: 160px;
        width: 90px;
        font-size: 0.9rem;
        padding: 10px;
    }

}