/*this css file use in all learn game like CapitalAlphabet, SmallAlphabet, Numbers, Fruits etc.*/

.grid {
    width: 59em;
    max-width: 59em;
    margin: 0 auto;
}

.grid__item, .riveritem {
    height: 8em;
}

.numberitem {
    height: 6em;
}
.numberitem img{
    width:100%;
    height:4em;
}

.coloritem {
    height: 5em;
}

.vehiclitem {
    height: 6em;
}

.damitem, .wonderitem {
    height: 8.5em;
}

.title {
    font-size: 20px;
}

@media screen and (max-width: 76em) {
    .grid {
        width: 48em;
        max-width: 48em;
    }

    .grid__item {
        font-size: 1.6em;
        height: 8.5em;
    }

    .riveritem {
        height: 8em;
    }

    .wonderitem {
        height: 9em;
    }

        .damitem .title, .wonderitem .title, .riveritem .title {
            font-size: 15px;
        }

    .numberitem, .coloritem {
        height: 6em;
    }
}

@media screen and (max-width: 63em) {
    .grid__item {
        font-size: 1.5em;
    }

    .grid {
        width: 45em;
        max-width: 45em;
    }
}

@media screen and (max-width: 50em) {
    .grid {
        width: 39.5em;
        max-width: 39.5em;
    }

    .title {
        font-size: 17px;
    }

    .grid__item {
        font-size: 1.3em;
    }

    .numberitem, .coloritem {
        height: 6em;
    }

    .vehiclitem {
        height: 7em;
    }

    .damitem, .riveritem {
        height: 9em;
    }
}

@media screen and (max-width: 41em) {
    .grid {
        width: 32em;
        max-width: 32em;
    }

    .title {
        font-size: 15px;
    }

    .wonderitem {
        height: 10em;
    }
}

@media screen and (max-width: 34em) {
    .grid__item {
        font-size: 1em;
    }

    .grid {
        width: 25em;
        max-width: 25em;
    }

    .numberitem {
        height: 7em;
    }
}

@media screen and (max-width: 27em) {
    .grid__item {
        font-size: 0.8em;
    }

    .grid__item{
        height: 9em;
    }

    .grid {
        width: 16em;
        max-width: 16em;
    }

    .numberitem {
        height: 8em;
    }

    .damitem, .riveritem, .wonderitem{
        height: 11em;
    }
}