@media screen and (max-width:1250px){
    html,body{
        font-size: 15px;
    }
    .container{
        width: 280px;
    }
    h1.title{
        font-size: 31px;
    }
    .score-container,
    .best-container{
        padding: 3px 10px;
    }
    .game-container{
        margin-top: 10px;
        width: 280px;
        height: 280px;
    }
    .grid-container,
    .tile-container{
        width: 260px;
        height: 260px;
    }
    .grid-row,
    .tile{
        height: 22.75%;
    }
    .grid-cell,
    .tile{
        width: 22.75%;
    }
    .grid-row{
        margin-bottom: 3%;
    }
    .grid-cell{
        margin-right: 3%;
    }
    .tile{
        font-size: 35px;
    }
    .tile[data-val="128"],
    .tile[data-val="256"],
    .tile[data-val="512"]{
        font-size: 25px;
    }
    .tile[data-val="1024"],
    .tile[data-val="2048"]{
        font-size: 21px;
    }

    .pop-container p{
        font-size: 30px;
    }
}

@media screen and (max-height: 768px) and (min-width: 481px) {
    .container {
        width: 450px;
    }
}

@media screen and (max-height: 768px) and (min-width: 481px) {
    .game-container {
        position: relative;
        padding: 12px;
        cursor: default;
        -webkit-touch-callout: none;
        -ms-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -ms-touch-action: none;
        touch-action: none;
        background: #bbada0;
        border-radius: 6px;
        width: 450px;
        height: 450px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
	
	.grid-container,
    .tile-container{
        width: 426px;
        height: 426px;
    }
	
	.container .row i {
		font-size: 25px;
	}
}


@media screen and (max-width: 768px) {
    .game-intro {
        margin: 20px 0;
    }
}

@media screen and (max-width: 480px) {
    .container {
        width: 95%;
    }

    .game-container {
        width: clamp(17.8125rem, 0.625rem + 91.6667vw, 28.125rem);
        height: clamp(17.8125rem, 0.625rem + 91.6667vw, 28.125rem);
    }
	
	.grid-container,
    .tile-container{
        width: clamp(16.5rem, -0.375rem + 90vw, 26.625rem);
        height: clamp(16.5rem, -0.375rem + 90vw, 26.625rem);
    }

    .game-intro, .game-container, footer {
        margin-top: 50px;
    }
}