.common-banner {
    background: url('../img/tokenomics/banner.png') no-repeat center;
    background-size: cover;
    background-position: center center;
}

.information {
    display: flex;
    max-width: 140rem;
    margin: 4.6rem auto;
    display: flex;
    justify-content: space-between;

    >div {
        width: 45rem;
        height: 18.6rem;
        text-align: center;
        border-radius: 1.9rem;
        padding: 4.8rem 0;
        background: #F7F7F7;
        border: 1px solid #E7E7E7;

        .label {
            font-size: 2.6rem;
            color: #757575;
            line-height: 2rem;
            margin-top: 3rem;
        }

        .value {
            font-weight: bold;
            font-size: 4.6rem;
            line-height: 4rem;
            color: #202020;
            text-align: center;
            font-family: DINAlternate, DINAlternate;

            span {
                font-size: 3rem;
            }
        }
    }
}

.distribution {
    overflow: hidden;

    >table {
        max-width: 139.4rem;
        width: 100%;
        margin: 0 auto;

        thead {
            background: #F7F7F7;
            height: 9rem;
            color: #202020;
            font-size: 2.2rem;
            font-weight: 500;
            line-height: 3rem;
            text-align: left;

            th {}

            th:first-child {
                padding-left: 5rem;
            }

            th:last-child {
                width: 53rem;

                padding-right: 5rem;

            }
        }

        tr {

            td,
            th {
                padding: 3rem 0;
            }
        }

        tbody {
            tr {
                font-size: 2rem;
                color: #757575;
                line-height: 2.8rem;

                td {}

                td:first-child {
                    padding-left: 5rem;
                }

                td:last-child {
                    width: 53rem;
                    padding-right: 5rem;

                }

                &:nth-child(even) {
                    background: #F7F7F7;
                }

            }
        }
    }
}

.usage {
    display: flex;
    max-width: 140rem;
    margin: 5rem auto 9.4rem;

    >div {
        width: 34rem;
        height: 33rem;
        padding-top: 2rem;

        img {
            width: 6rem;
            height: 6rem;
        }

        .label {
            line-height: 3.7rem;
            font-weight: 500;
            font-size: 2.6rem;
            color: #202020;
            margin-top: 2rem;
        }

        .text {
            margin-top: 1.8rem;
            line-height: 3rem;
            font-size: 2rem;
            color: #757575;
        }
    }

    >div+div {
        margin-left: 1.3rem;
    }
}
@media screen and (max-width: 916px){
    .content {
        .usage{
            padding: 0 2rem;

            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-row-gap: 12px;
            grid-column-gap: 12px;
            align-items: center;
            justify-content: center;
            > div + div {
                margin-left: 0;
            }
        }
        
    }

}

@media screen and (max-width: 700px){
    .content {
        .information{
            flex-wrap: wrap;
            padding: 0 2rem;
           > div {
            margin-bottom: 2rem;
             width: 100%;
           }
        }
        .distribution{
            .text-right{
                width: auto;
            }
        }
    }

}

@media screen and (max-width: 465px) {
    .content {
        .usage{
            display: flex;
            flex-wrap: wrap;
        }
    }
}