.games a{
    position: relative;
}
.games .x:after{
    content: '';
    position: absolute;
    right: 0; bottom: 0;
    background: transparent url(../images/v2/x.png) no-repeat right bottom/contain;
    
}
.games .x:before{
    content: attr(data-x);
    position: absolute;
    right: 3px; bottom: 4px;
    
    display: flex;
    align-items: center; justify-content: center;
    z-index: 2; 
}


/* Mobile */
@media screen and (max-width: 428px) {
    section.games{
        flex-direction: column;
        margin: 20px auto 0 auto;
        border-top: 2px solid #2F3D90;
        text-align: center;
        
    }
    section.games > div{
        max-width: 768px;
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
    section.games > div > a{
        color: #fff;
        font: bold 22px/22px 'Montserrat', sans-serif;
        border: 2px solid #FFF;
        text-transform: uppercase;
        width: 204px; height: 62px;
        background: none;
        display: flex;
        align-items: center; justify-content: center;
    }
    div.games{
        max-width: 768px;
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin: 20px 0;
        justify-content: center;
    }
    div.games a{
        width: 170px; height: 109px;
        border: 1px solid #878787;
    }
    h2{
        color:#FFD100;
        font: bold 24px/32px 'Montserrat', sans-serif;
        margin: 0;
    }
    h2 + span{
        color:#FFF;
        font: normal 18px/20px 'Montserrat', sans-serif;
        padding: 0 16px;
    }
    .games .x:after{
        width: 66px; height: 31px;
    }
    .games .x:before{
        font: bold 12px/normal 'Montserrat', sans-serif;
    }
}
@media screen and (max-width: 320px) {
    div.games a {
        width: 140px;
        height: auto;
    }
}
/* Tablet */
@media screen and (min-width: 429px) and (max-width: 1024px){
    section.games{
        flex-direction: column;
        margin: 20px auto 0 auto;
        border-top: 2px solid #2F3D90;
        text-align: center;
        
    }
    section.games > div{
        max-width: 768px;
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
    section.games > div > a{
        color: #fff;
        font: bold 22px/22px 'Montserrat', sans-serif;
        border: 2px solid #FFF;
        text-transform: uppercase;
        width: 204px; height: 62px;
        background: none;
        display: flex;
        align-items: center; justify-content: center;
    }
    div.games{
        max-width: 768px;
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin: 20px 0;
        justify-content: center;
    }
    div.games a{
        width: 170px; height: 109px;
        border: 1px solid #878787;
    }
    h2{
        color:#FFD100;
        font: bold 24px/32px 'Montserrat', sans-serif;
        margin: 0;
    }
    h2 + span{
        color:#FFF;
        font: normal 18px/20px 'Montserrat', sans-serif;
    }
    .games .x:after{
        width: 66px; height: 31px;
    }
    .games .x:before{
        font: bold 12px/normal 'Montserrat', sans-serif;
    }
}
/* Desktop */
@media screen and (min-width: 1025px){
    section.games{
        flex-direction: column;
        margin: 40px auto 0 auto;
        border-top: 2px solid #2F3D90;
        max-width: 1200px;
    }
    section.games > div{
        max-width: 1920px;
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40px;
    }
    section.games > div > a{
        color: #fff;
        font: bold 22px/22px 'Montserrat', sans-serif;
        border: 2px solid #FFF;
        text-transform: uppercase;
        width: 204px; height: 62px;
        background: none;
        display: flex;
        align-items: center; justify-content: center;
    }
    div.games{  
        justify-content: center;
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin: 40px 0;
    }
    div.games a{
        width: 288px; height: 184px;
       
    }
    h2{
        color:#FFD100;
        font: bold 30px/36px 'Montserrat', sans-serif;
        margin: 0;
    }
    h2 + span{
        color:#FFF;
        font: normal 24px/26px 'Montserrat', sans-serif;
        text-align: center;
    }
    .games .x:after{
        width: 100px; height: 50px;
    }
    .games .x:before{
        font: bold 20px/normal 'Montserrat', sans-serif;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    
}