.show-game-frame {
    display: inline-block;
    float: left;
    padding: 5px;
}

.game-type-box {
    background: #3b38f5;
    border: 1px solid rgb(255, 222, 168);
    width: 100%;
    height: 0;
    box-sizing: border-box;
    display: block;
    background-size: 100% auto;
    background-position: center;
    transition: all 0.5s linear;

}

.game-type-box:hover {
    background-size: 110% auto;
}

.game-name {
    /* color: rgb(255, 222, 168); */
    color: aliceblue;
    line-height: 2rem;
    text-align: center;
    font-size: 2.75vh;
    font-family: Microsoft JhengHei;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.808);
    display: inline-block;
    width: 50%;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

.money {
    color: aliceblue;
    line-height: 2rem;
    text-align: center;
    font-size: 3vh;
    font-family: Microsoft JhengHei;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.808);
    z-index: 2;
    display: inline-block;
    width: 50%;
    bottom: 0;
    right: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

.game-type-box:hover .game-name {
    color: #ffd80b;
    line-height: 5rem;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

.game-type-box:hover .money {
    color: #ffd80b;
    line-height: 5rem;

    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

.esport-class {
    border: 2px solid rgb(255, 222, 168);
}


.box-width-1 {
    width: 50%;
}

.box-width-2 {
    width: 50%;
}

.box-width-3 {
    width: 50%;
}

.box-width-4 {
    width: 33.3%;
}

.box-width-5 {
    width: 33.3%;
}

.box-width-6 {
    width: 33.3%;
}
.box-width-7 {
    width: 33.3%;
}

.box-height-1 {
    padding-top: 100%;
}

.box-height-2 {
    padding-top: calc(50% - 5px);
}

.box-height-3 {
    padding-top: calc(50% - 5px);
}

.box-height-4 {
    padding-top: 100%;
}

.box-height-5 {
    padding-top: 100%;
}

.box-height-6 {
    padding-top: 100%;
}
.box-height-7 {
    padding-top: 100%;
}

@media only screen and (orientation: portrait) and (min-device-width: 500px) and (max-device-width: 800px) {

    .box-height-1,
    .box-height-2,
    .box-height-3,
    .box-height-4,
    .box-height-5,
    .box-height-6,
    .box-height-7 {
        padding-top: 50%;
    }

    .box-width-1,
    .box-width-2,
    .box-width-3,
    .box-width-4,
    .box-width-5,
    .box-width-6,
    .box-width-7 {
        width: 100%;
    }
}



@media only screen and (orientation: portrait) and (min-device-width: 300px) and (max-device-width: 499px) {

    .box-height-1,
    .box-height-2,
    .box-height-3,
    .box-height-4,
    .box-height-5,
    .box-height-6,
    .box-height-7 {
        padding-top: 100%;
    }

    .box-width-1,
    .box-width-2,
    .box-width-3,
    .box-width-4,
    .box-width-5,
    .box-width-6,
    .box-width-7 {
        width: 50%;
    }
}

@media only screen and (orientation: portrait) and (min-device-width: 100px) and (max-device-width: 299px) {

    .box-height-1,
    .box-height-2,
    .box-height-3,
    .box-height-4,
    .box-height-5,
    .box-height-6,
    .box-height-7 {
        padding-top: 100%;
    }


    .box-width-1,
    .box-width-2,
    .box-width-3,
    .box-width-4,
    .box-width-5,
    .box-width-6,
    .box-width-7 {
        width: 100%;
    }
}

@media only screen and (orientation: landscape) and (max-device-width: 400px) {

    .box-height-1,
    .box-height-2,
    .box-height-3,
    .box-height-4,
    .box-height-5,
    .box-height-6,
    .box-height-7 {
        padding-top: 60%;
    }

    .box-width-1,
    .box-width-2,
    .box-width-3,
    .box-width-4,
    .box-width-5,
    .box-width-6,
    .box-width-7 {
        width: 33%;
    }
}

@media only screen and (orientation: portrait) and (min-width: 500px) and (max-width: 800px) {

    .box-height-1,
    .box-height-2,
    .box-height-3,
    .box-height-4,
    .box-height-5,
    .box-height-6,
    .box-height-7 {
        padding-top: 50%;
    }

    .box-width-1,
    .box-width-2,
    .box-width-3,
    .box-width-4,
    .box-width-5,
    .box-width-6,
    .box-width-7 {
        width: 100%;
    }
}



@media only screen and (orientation: portrait) and (min-width: 300px) and (max-width: 499px) {

    .box-height-1,
    .box-height-2,
    .box-height-3,
    .box-height-4,
    .box-height-5,
    .box-height-6,
    .box-height-7 {
        padding-top: 100%;
    }

    .box-width-1,
    .box-width-2,
    .box-width-3,
    .box-width-4,
    .box-width-5,
    .box-width-6,
    .box-width-7 {
        width: 50%;
    }
}

@media only screen and (orientation: portrait) and (min-width: 100px) and (max-width: 299px) {

    .box-height-1,
    .box-height-2,
    .box-height-3,
    .box-height-4,
    .box-height-5,
    .box-height-6,
    .box-height-7 {
        padding-top: 100%;
    }


    .box-width-1,
    .box-width-2,
    .box-width-3,
    .box-width-4,
    .box-width-5,
    .box-width-6,
    .box-width-7 {
        width: 100%;
    }
}

@media only screen and (orientation: landscape) and (max-height: 400px) {

    .box-height-1,
    .box-height-2,
    .box-height-3,
    .box-height-4,
    .box-height-5,
    .box-height-6,
    .box-height-7 {
        padding-top: 60%;
    }

    .box-width-1,
    .box-width-2,
    .box-width-3,
    .box-width-4,
    .box-width-5,
    .box-width-6,
    .box-width-7 {
        width: 33%;
    }
}