@media (min-width: 1441px) and (max-width: 1920px) {
    .wrapper {
        max-width: 86%;
    }

    .box-games-card.six {
        width: 15%;
    }
}

@media (min-width: 992px) and (max-width: 1440px) {
    .wrapper {
        max-width: 92%;
    }

    .box-games-card.six {
        width: 30%;
    }

    .w22 {
        width: 33.3%;
    }

    .wrapper .swiper {
        width: 33.3% !important;
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    .wrapper {
        max-width: 100%;
    }

    .box-games-card.six {
        width: 45%;
    }

    .w66 {
        width: 50%;
    }

    .w33 {
        width: 50%;
    }

    .w22 {
        width: 33.3%;
    }

    .wrapper .swiper {
        width: 33.3% !important;
    }
}

@media screen and (max-width: 525px) {
    .wrapper {
        max-width: 100%;
        flex-direction: column;
        padding: 0 8px;
    }

    .wrapper .box {
        margin-left: 0 !important;
    }

    .w66 {
        width: 100%;
    }

    .w33 {
        width: 100%;
    }

    .w22 {
        width: 100%;
    }

    .wrapper .swiper {
        width: 100% !important;
        height: 245px!important;
    }

    .ad-bottom {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .outer-wrapper .box-header {
        width: 92%;
    }
}

.wrapper {
    display: flex;
    margin: 0 auto;
    justify-content: space-evenly;
    width: 100%;
}

.wrapper .box {
    display: flex;
    box-shadow: 0 10px 15px #d3d8eb;
    border-top: solid #e3e9ff 6px;
    border-radius: 8px;
    align-items: flex-start;
    flex-direction: column;
    border-color: #3791fa;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#a6cdfd), color-stop(10%, #fbfdff), to(#ffffff)) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, #a6cdfd 0%, #fbfdff 10%, #ffffff 100%) 0% 0% no-repeat padding-box;
    margin-left: 10px;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 16px;
}

.ad-top {
    color: #95a5a6;
    font-size: 12px;
    border-top: solid #e3e9ff 6px;
    height: 300px;
    margin: 0 auto;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#f8faff), to(#ffffff)) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, #f8faff 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0 10px 15px #d3d8eb;
    padding: 8px;
    border-radius: 8px;
    color: #95a5a6;
    margin-bottom: 16px;
}

.ad-bottom {
    width: 33.3%;
    box-shadow: 0 10px 15px #d3d8eb;
    padding: 8px;
    border-radius: 8px;
    color: #95a5a6;
    font-size: 12px;
    border-color: #e3e9ff;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#f8faff), to(#ffffff)) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, #f8faff 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    border-top: solid #e3e9ff 6px;
    margin-bottom: 16px;
    margin-left: 10px;
}

.outer-wrapper {
    display: flex;
    flex-direction: column;
    background: #5be3b8 0% 0% no-repeat padding-box;
    height: 260px;
    margin-bottom: 16px;
}

.outer-wrapper .box-header {
    width: 86%;
    margin: 0 auto;
}

.box.purple {
    border-color: #8e08bf;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#f2ceff), color-stop(10%, #fbfdff), to(#ffffff)) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, #f2ceff 0%, #fbfdff 10%, #ffffff 100%) 0% 0% no-repeat padding-box;
    -webkit-box-shadow: 0 10px 15px #e4b3f7;
    box-shadow: 0 10px 15px #e4b3f7;
}

.box.orange {
    border-color: #ff5539;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#ffd8d1), color-stop(10%, #fbfdff), to(#ffffff)) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, #ffd8d1 0%, #fbfdff 10%, #ffffff 100%) 0% 0% no-repeat padding-box;
    -webkit-box-shadow: 0 10px 15px #f5b9ae;
    box-shadow: 0 10px 15px #f5b9ae;
}

.box.yellow {
    border-color: #bcd31b;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#f1f8ba), color-stop(10%, #fbfdff), to(#ffffff)) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, #f1f8ba 0%, #fbfdff 10%, #ffffff 100%) 0% 0% no-repeat padding-box;
    -webkit-box-shadow: 0 10px 15px #d6e281;
    box-shadow: 0 10px 15px #d6e281;
}

.box.pink {
    border-color: #ff24ee;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#ffd3fc), color-stop(10%, #fbfdff), to(#ffffff)) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, #ffd3fc 0%, #fbfdff 10%, #ffffff 100%) 0% 0% no-repeat padding-box;
    -webkit-box-shadow: 0 10px 15px #f5abf1;
    box-shadow: 0 10px 15px #f5abf1;
}

.box.girls {
    border-color: #ff006c;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#ffcce2), color-stop(10%, #fbfdff), to(#ffffff)) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, #ffcce2 0%, #fbfdff 10%, #ffffff 100%) 0% 0% no-repeat padding-box;
    -webkit-box-shadow: 0 10px 15px #fdc5dd;
    box-shadow: 0 10px 15px #fdc5dd;
}

.box.green {
    border-color: #31bf84;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#c6ffe7), color-stop(10%, #fbfdff), to(#ffffff)) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, #c6ffe7 0%, #fbfdff 10%, #ffffff 100%) 0% 0% no-repeat padding-box;
    -webkit-box-shadow: 0 10px 15px #9af0ce;
    box-shadow: 0 10px 15px #9af0ce;
}

.box.brown {
    border-color: #e4a61d;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#fff1d3), color-stop(10%, #fbfdff), to(#ffffff)) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, #fff1d3 0%, #fbfdff 10%, #ffffff 100%) 0% 0% no-repeat padding-box;
    -webkit-box-shadow: 0 10px 15px #f5dda8;
    box-shadow: 0 10px 15px #f5dda8;
}

.box.mint {
    border-color: #00e1ec;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#bafcff), color-stop(10%, #fbfdff), to(#ffffff)) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, #bafcff 0%, #fbfdff 10%, #ffffff 100%) 0% 0% no-repeat padding-box;
    -webkit-box-shadow: 0 10px 15px #aef2f5;
    box-shadow: 0 10px 15px #aef2f5;
}