@media screen and (min-width: 1919px) {
  .changes::before {
    display: none
  }
}

@media screen and (min-width: 1740px) {
  .banner__prizes-bg {
    bottom: -180px !important
  }
}

@media screen and (max-width: 1680px) {
  .banner__prizes__right-img {
    transform: scale(.8)
  }

  .banner__prizes-bg {
    left: -15vw
  }
}

@media screen and (max-width: 1440px) {
  .banner__prizes-sky {
    top: 15%;
    right: -20%
  }

  .banner__prizes-bg {
    bottom: -15%;
    left: -5vw
  }
}

@media screen and (max-width: 1439px) {
  .swiper {
    padding: 30px 0
  }

  .friends-block {
    justify-content: space-evenly;
    gap: 10px
  }
}

@media screen and (max-width: 1379px) {
  .swiper .swiper-pagination-bullet {
    width: 60px;
    height: 8px;
    background: radial-gradient(128% 100% at 50% 0, #ffc342 2.6%, #9f6e03 57.29%, #9f6e03 60.94%, #ff8717 100%);
    border-radius: 4px
  }

  .swiper .swiper-pagination {
    display: none
  }

  .statistics {
    text-align: end
  }

  .statistic__img {
    width: 100%;
    margin-bottom: 20px
  }

  .info-text {
    font-size: 15px
  }

  .statistics-info {
    padding: 16px 0 16px 45px;
    gap: 10px;
    justify-content: space-evenly
  }

  .stream {
    padding-top: 10vh
  }

  .friends {
    padding-top: 5vh
  }

  .banner__prizes__right-img {
    transform: scale(.8);
    bottom: 0
  }
}

@media screen and (max-width: 1350px) {
  .header__box-col-right {
    gap: 20px
  }

  .header__box-col-right .start-game {
    display: none
  }

  .header-btn {
    display: inline-flex
  }

  .header.fixed .header__box .start-game {
    display: block;
    padding-bottom: 0
  }

  .benefits-img {
    height: 253px
  }

  .benefits-title {
    font-size: 18px
  }

  .benefits-subtitle, .item-block .more-server, .item-subtitle.block-subtitle {
    font-size: 14px
  }

  .benefits-text {
    margin: -50px 20px 24px
  }

  .server-block_wrapper {
    padding: 24px 70px
  }

  .race-img {
    right: 20px
  }

  .news .swiper {
    margin-top: -30px;
    padding-top: 0
  }

  .item-block {
    padding: 24px 20px 0
  }

  .more-server {
    padding: 0 20px
  }

  .h2-title {
    font-size: 40px
  }

  .subtitle_light {
    font-size: 18px;
    margin-bottom: 37px
  }

  .block-title {
    font-size: 16px
  }

  .changes-img {
    max-width: 45%;
    right: -13vw
  }

  .friends .block-title {
    font-size: 22px
  }

  .awards-img__right {
    top: 4px
  }

  .discord-block::after {
    left: 0
  }
}

@media screen and (max-width: 1250px) {
  .header.fixed .header__nav-item:nth-child(4) {
    display: flex
  }

  .header.fixed .header__nav-list .header__nav-item:nth-last-child(-n+3) {
    display: none
  }

  .awards-img__left {
    left: -180px
  }
}

@media screen and (max-width: 1179px) {
  body {
    padding-top: 168px
  }

  .server-name {
    grid-template-columns:repeat(1, 346px)
  }

  .title {
    font-size: 40px
  }

  .subtitle {
    font-size: 15px
  }

  .classes .btn-bordered-box {
    padding: 16px
  }

  .h2-title_black {
    font-size: 43px
  }

  .discord-block iframe {
    max-width: 435px
  }

  .friends .block-title {
    font-size: 20px
  }

  .friends .block-subtitle {
    font-size: 16px
  }

  .block-text {
    margin-top: 20px
  }

  .awards-img__left {
    left: -240px
  }
}

@media screen and (max-width: 1024px) {
  .news-img {
    aspect-ratio: 4/3
  }

  .news-item-wrapper {
    margin: 0 7px
  }

  .container {
    padding: 0 42px
  }

  .btn .btn-bordered-box {
    padding: 13px 89px
  }

  .btn-blue .btn-bordered-box {
    padding: 13px 48px
  }

  .best .block-title, .btn-orange .btn-bordered-box, .item-title, .learn-more, .profile-title, .server-inner .block-title, .social-text {
    font-size: 16px
  }

  .start-game {
    padding-bottom: 11vh
  }

  .h2-title, .h2-title_black {
    font-size: 36px
  }

  .benefits-title, .block-desc, .block-title, .content-text, .footer-title, .friends .block-title, .online-count, .server-title, .subtitle, .website-title {
    font-size: 18px
  }

  .subtitle_dark, .subtitle_light {
    font-size: 18px;
    margin-bottom: 50px
  }

  .logo__image {
    position: relative;
    z-index: 6;
    margin-right: 28px;
    max-width: 120px
  }

  .header__nav-list {
    gap: 22px
  }

  .btn-desc, .footer-copy, .footer-info__item, .header .btn-bordered-box, .header__nav-item__link, .item-block .more-server, .more-server, .online-text, .profile-subtitle, .server-item {
    font-size: 14px
  }

  .h1-title {
    font-size: 46px
  }

  .server-text::after, .server-text::before {
    top: 20px
  }

  .benefits-text {
    margin: 0 20px 24px
  }

  .best, .changes, .contacts {
    padding-top: 10vh
  }

  .changes-text .subtitle_light {
    max-width: 602px
  }

  .changes-block, .news-block {
    margin: 50px 0 40px
  }

  .changes-content img {
    width: 40px;
    height: 40px
  }

  .block-text {
    margin-top: 8px
  }

  .changes-img {
    right: -29vw;
    top: -20px;
    max-width: 75%
  }

  .hero {
    padding: 15vh 0 11vh
  }

  .block-content, .friends-block .changes-block {
    gap: 20px
  }

  .race-choice {
    max-width: 925px
  }

  .classes .btn-bordered-box {
    gap: 10px
  }

  .content-item {
    font-size: 14px;
    max-width: 380px
  }

  .choice-text, .table-text, .x-bonus {
    font-size: 12px
  }

  .server-box-wrapper {
    padding: 10px
  }

  .server-item-wrapper > span {
    padding: 16px 16px 12px
  }

  .about-img {
    width: 32px;
    height: 32px
  }

  .block-subtitle {
    font-size: 14px;
    padding-top: 5px
  }

  .inner-wrap {
    max-width: 480px
  }

  .inner-block {
    margin-bottom: 30px
  }

  .x-count {
    font-size: 20px
  }

  .info-text, .news-icon__text {
    font-size: 10px
  }

  .statistics {
    text-align: -webkit-right;
    text-align: -moz-right
  }

  .statistics-info {
    padding: 12px 0;
    max-width: 380px
  }

  .awards-block .h2-title, .statistic__img {
    margin-bottom: 0
  }

  .info-block {
    gap: 6px
  }

  .info-block img {
    width: 20px;
    height: 20px
  }

  .news-item.block-bordered-gray:after {
    top: -2px;
    bottom: -2px;
    left: 5px;
    right: 5px
  }

  .news-icon {
    left: 0
  }

  .news-text__laptop {
    display: none
  }

  .item-subtitle.block-subtitle {
    font-size: 14px;
    margin: 4px 0 16px
  }

  .item-block {
    padding: 24px 20px 0
  }

  .more-server {
    padding: 0 20px
  }

  .best-block {
    gap: 16px;
    margin-bottom: 40px
  }

  .best-text {
    font-size: 24px
  }

  .table__item-part {
    max-width: 258px
  }

  .awards {
    padding-bottom: 90px
  }

  .awards-blocks {
    padding: 30px 70px
  }

  .awards-img__right-laptop {
    display: block;
    position: absolute;
    top: 54px;
    right: -43px
  }

  .awards .block-subtitle {
    font-size: 18px;
    margin: 0 auto
  }

  .awards-btn {
    margin-top: 24px
  }

  .awards-img__left {
    top: -60px;
    left: -205px;
    transform: scale(.65)
  }

  .awards-img__right {
    transform: scale(.6);
    right: -127px;
    top: -87px
  }

  .friends-block {
    gap: 42px
  }

  .friends .block-subtitle {
    font-size: 14px;
    max-width: 217px
  }

  .contacts-block {
    justify-content: space-between
  }

  .vk-block {
    width: 44vw
  }

  .vk-post {
    width: 40vw
  }

  .banner__prizes {
    padding: 5vh 0 15vh
  }

  .banner__prizes__title {
    font-size: 32px;
    margin-bottom: 35px
  }

  .banner__prizes__items {
    margin-bottom: 45px
  }

  .banner__prizes__desc, .footer-link, .website-desc {
    font-size: 16px
  }

  .banner__prizes__img {
    width: 32px;
    height: 32px
  }

  .banner__prizes__body {
    top: 11vh
  }

  .banner__prizes__body_wrap {
    padding: 40px 30px
  }

  .banner__prizes__right-img {
    bottom: -150px;
    right: -120px;
    transform: scale(.7)
  }

  .social-btn img {
    height: 30px
  }

  .social-btn .btn-bordered-box {
    padding: 12px
  }

  .table__row {
    gap: 16px
  }

  .table__item {
    width: calc(33.33vw - 16px)
  }

  .table__item-heading {
    font-size: 24px
  }

  .table__item-subtitle {
    font-size: 18px
  }

  .table__item-col {
    font-size: 12px
  }

  .banner__prizes-sky {
    top: auto;
    bottom: -10vh;
    right: -30%
  }

  .banner__prizes-left-img {
    left: -70px;
    bottom: 160px
  }
}

@media screen and (max-width: 1022px) {
  .swiper .swiper-pagination {
    display: flex;
    top: 30px
  }

  .server-title {
    font-size: 16px
  }
}

@media screen and (max-width: 992px) {
  .burger__menu-text, .burger__menu-title {
    font-family: Manrope-Bold, sans-serif;
    line-height: 130%;
    font-weight: 700
  }

  .burger__menu-account .text, .burger__menu-server-text {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .32);
    white-space: nowrap
  }

  .header .btn-bordered-box, .header.fixed .header__box .start-game, .header__nav, .header__nav-actions {
    display: none
  }

  .header.fixed {
    background: #070b18
  }

  .header.fixed .header-btn {
    margin-left: 0
  }

  .title {
    font-size: 30px
  }

  .start-game {
    padding-bottom: 100px
  }

  .header__nav-item_submenu {
    left: -120px
  }

  .server-name {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 25px;
    margin: 0 0 100px
  }

  .burger__menu-actions, .burger__menu-nav, .burger__menu-server, .footer-website, .subtitle_dark, .subtitle_light {
    margin-bottom: 30px
  }

  .server-title {
    font-size: 22px
  }

  .burger__menu-icon .header__nav-item__link {
    display: flex
  }

  .burger, .burger__menu .header__nav-actions, .lock .burger__menu {
    display: block
  }

  .burger__menu-icon .header__nav-item__link::after {
    content: url(https://frontend-static-eu.scrydecdn.com/high-five-x50/assets/img/svg/dropdown-arrow.svg);
    transition: .7s;
    margin-left: 8px
  }

  .burger-checkbox {
    position: absolute;
    visibility: hidden
  }

  .burger {
    position: relative;
    z-index: 1;
    cursor: pointer;
    border: none;
    background: 0 0;
    width: 30px;
    height: 25px
  }

  .burger::after, .burger::before {
    content: '';
    left: 0;
    position: absolute;
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 10px;
    background: #fff
  }

  .burger::before {
    top: 0;
    box-shadow: 0 11px 0 #fff;
    transition: box-shadow .3s .15s, top .3s .15s, transform .3s
  }

  .burger::after {
    bottom: 0;
    transition: bottom .3s .15s, transform .3s
  }

  .burger-checkbox:checked + .burger::before {
    top: 11px;
    transform: rotate(45deg);
    box-shadow: 0 6px 0 transparent;
    transition: box-shadow .15s, top .3s, transform .3s .15s
  }

  .burger-checkbox:checked + .burger::after {
    bottom: 11px;
    transform: rotate(-45deg);
    transition: bottom .3s, transform .3s .15s
  }

  .burger-line {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    transition: .3s
  }

  .burger-line_span {
    transform: scale(1)
  }

  .burger.active .burger-line_span {
    transform: scale(0)
  }

  .burger.active .burger-line_top {
    top: 10px;
    transform: rotate(-45deg) translate(0, -50%)
  }

  .burger.active .burger-line_bottom {
    bottom: 9px;
    transform: rotate(45deg) translate(0, 50%)
  }

  .lock {
    overflow: hidden;
    background: #070b18
  }

  .header__nav.active .lock {
    background: #000
  }

  .burger__menu {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    height: 100%;
    background: #070b18;
    padding: 20px 0 120px;
    z-index: 5;
    overflow: auto;
    transition: .3s
  }

  .arrow-mobile, .burger__menu-actions .icon {
    width: 32px;
    height: 32px
  }

  .burger__menu .social-btn .btn-bordered-box {
    display: flex
  }

  .burger__menu .start-game .btn-bordered-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px
  }

  .burger__menu-actions {
    display: flex;
    flex-direction: column
  }

  .burger__menu-text {
    color: #fff;
    letter-spacing: .14px
  }

  .burger__menu-title {
    font-size: 16px
  }

  .burger__menu-account, .burger__menu-server-text {
    font-family: TrajanSansPro-Bold, sans-serif;
    line-height: 140%;
    display: flex;
    font-size: 14px
  }

  .burger__menu-language {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px
  }

  .burger__menu-language.header__nav-item_sub {
    display: flex;
    position: relative;
    opacity: 1;
    z-index: 2
  }

  .burger__menu-account {
    padding: 12px 12px 12px 20px;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-radius: 16px;
    background: radial-gradient(213.27% 499.58% at 46.94% 265.42%, #357dea 0, #090f27 47.05%);
    color: #fff;
    font-style: normal;
    text-transform: uppercase
  }

  .burger__menu-account .text {
    background: linear-gradient(0deg, #d7e8ff 48.81%, rgba(108, 128, 156, .6) 64.52%, rgba(215, 232, 255, .6) 82.62%), #fff;
    -webkit-background-clip: text;
    background-clip: text
  }

  .burger__menu-account .flex {
    display: flex;
    align-items: center;
    gap: 12px
  }

  .burger__menu-icon {
    gap: 6px;
    display: flex;
    align-items: center
  }

  .arrow-mobile {
    background: url(https://frontend-static-eu.scrydecdn.com/high-five-x50/assets/img/svg/arrow-mobile.svg)
  }

  .burger__menu-server-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px
  }

  .burger__menu-server-item {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px;
    color: inherit;
    position: relative
  }

  .burger__menu-server-item .btn-bordered-box {
    padding: 16px;
    border-radius: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: radial-gradient(230.47% 295.42% at 50% 0, #090f27 22.04%, #d7e8ff 100%), radial-gradient(106.8% 45.71% at 50% 30.71%, #d0dbeb 31.33%, rgba(13, 30, 53, .6) 100%)
  }

  .burger__menu-server-item:after {
    border-radius: 14px !important
  }

  .burger__menu-server-text {
    font-weight: 700;
    align-items: center;
    gap: 6px;
    background: linear-gradient(0deg, #d7e8ff 48.81%, rgba(108, 128, 156, .6) 64.52%, rgba(215, 232, 255, .6) 82.62%), #fff;
    -webkit-background-clip: text;
    background-clip: text
  }

  .burger__menu-nav .start-game {
    display: block !important
  }

  .burger__menu-item {
    display: flex;
    justify-content: space-between;
    padding-bottom: 21px;
    padding-top: 21px
  }

  .burger__menu-item:hover {
    opacity: .7
  }

  .burger__menu-item:after {
    content: "";
    background: url(https://frontend-static-eu.scrydecdn.com/high-five-x50/assets/img/svg/arrow-mobile.svg);
    width: 32px;
    height: 32px
  }

  .burger__menu-item:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, .4)
  }

  .burger__menu-item .burger__menu-link {
    color: inherit;
    width: 100%;
    display: flex;
    align-items: center
  }

  .burger__menu .header-btn {
    width: 100%
  }

  .burger__menu-footer .website-title {
    font-size: 14px;
    color: #ffc039
  }

  .footer-website {
    margin-top: 40px
  }

  .burger__menu-server-item .new-icon {
    width: 20px;
    height: 20px;
    position: static;
    background-size: contain;
    background-repeat: no-repeat
  }

  .burger__menu-server-item:hover .new-icon {
    transform: scale(1.5);
    transition: .7s
  }

  .changes-img {
    top: 30px
  }

  .inner-benefits {
    display: flex;
    flex-direction: column
  }

  .table__item-subtitle {
    font-size: 16px
  }

  .table__item-col .icon {
    width: 20px;
    height: 20px
  }

  .friends-block {
    flex-direction: column-reverse;
    align-items: center
  }

  .changes-block {
    margin: 0 0 25px
  }

  .contacts .btn .btn-bordered-box {
    padding: 18px 31px
  }

  .btn-desc {
    font-size: 12px
  }

  .banner__prizes__right-img {
    transform: scale(.7)
  }

  .banner__prizes__body {
    top: 2vh
  }

  .banner__prizes__title {
    font-size: 27px
  }

  .footer-info {
    gap: 90px
  }

  .burger__menu .block-icons, .burger__menu .social-block {
    margin: 0
  }
}

@media screen and (max-width: 874px) {
  .h1-title {
    font-size: 36px
  }

  .subtitle_dark, .subtitle_light {
    font-size: 14px
  }

  .h2-title, .h2-title_black {
    font-size: 24px
  }

  .content-text, .subtitle {
    font-size: 16px
  }

  .classes-img {
    width: 20px;
    height: 20px
  }

  .server-content {
    flex-direction: column-reverse;
    gap: 30px
  }

  .x-block {
    flex-wrap: wrap
  }

  .statistics-info {
    max-width: 100%
  }

  .table__item-row {
    grid-gap: 5px
  }

  .table__item-col .icon {
    width: 15px;
    height: 15px
  }

  .btn .btn-bordered-box {
    padding: 17px 51px
  }

  .friends .block-title {
    font-size: 18px
  }
}

@media screen and (min-width: 768px) {
  .header__nav-item:hover > .header__nav-item__link, .header__nav-item__link:hover {
    color: #ffc039
  }

  .header__nav-item:hover > .header__nav-item__link path, .header__nav-item__link:hover path {
    fill: #ffc039
  }

  .header__nav-item:hover.header__nav-item_sub::after {
    content: url(https://frontend-static-eu.scrydecdn.com/high-five-x50/assets/img/svg/dropdown-arrow__hover.svg);
    transform: rotate(180deg);
    transition: transform .7s;
    width: 16px;
    height: 16px
  }
}

@media screen and (max-width: 767px) {
  .race-block, .race-block.active .race__block-content, .race-choice__mobile {
    display: flex
  }

  .block-castle img, .block-olympiad img, .changes-img, .race-img {
    max-width: 100%
  }

  .btn-desc, .h2-title, .h2-title_black, .info-block, .subtitle, .subtitle_dark, .subtitle_light {
    text-align: start
  }

  .changes::after, .race-mobile {
    background-size: contain;
    background-repeat: no-repeat
  }

  body {
    padding-top: 136px;
    background: url(https://frontend-static-eu.scrydecdn.com/high-five-x50/assets/img/bg-mobile.png) 0 0/cover no-repeat #070b18
  }

  .container, .server__text-block .subtitle {
    padding: 0 20px
  }

  .btn .btn-bordered-box {
    padding: 16px 23px
  }

  .subtitle_dark, .subtitle_light {
    margin-left: 0;
    margin-bottom: 30px
  }

  .discord-block, .iframe, .social-block, .start-game__footer .btn, .vk-block {
    width: 100%
  }

  .h1-title {
    font-size: 32px
  }

  .server-block_wrapper {
    padding: 24px 62px
  }

  .server__text-block {
    margin-bottom: 50px
  }

  .start-game {
    padding-bottom: 40px
  }

  .server-text::after, .server-text::before {
    top: 15px
  }

  .hero .h2-title_black, .server-content .more-server {
    text-align: left
  }

  .hero .subtitle_dark {
    max-width: 70%
  }

  .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    transform: translateX(-70%)
  }

  .changes-content img {
    width: 56px;
    height: 56px
  }

  .benefits .container, .choice-people, .inner-benefits .more-server, .more-info, .races {
    padding: 0
  }

  .changes-img {
    bottom: 0;
    top: auto;
    right: -10vw;
    transform: rotate(5deg)
  }

  .changes-content:not(:last-child) {
    margin-bottom: 28px
  }

  .hero {
    padding: 15vh 0 5vh
  }

  .block-content {
    gap: 40px;
    flex-direction: column;
    align-items: center
  }

  .content-text, .online-count, .server-title {
    font-size: 18px
  }

  .hero .more-info {
    display: none;
    margin-top: 50px
  }

  .race {
    background-position: bottom;
    background-size: contain;
    padding-bottom: 47vh
  }

  .race-mobile {
    background-image: url(https://frontend-static-eu.scrydecdn.com/high-five-x50/assets/img/race-bg-mobile.png);
    background-color: #fff;
    padding-top: 5vh
  }

  .race-block {
    justify-content: center;
    flex-direction: column
  }

  .race-block.active {
    max-height: unset
  }

  .icon-arrow-bottom-darken {
    transition: transform .4s
  }

  .arrow.active, .race-block.active .icon-arrow-bottom-darken {
    transform: rotate(180deg)
  }

  .race-choice-wrapper {
    justify-content: space-between
  }

  .race-choice-wrapper .flex {
    display: flex;
    align-items: center;
    gap: 16px
  }

  .inner-benefits, .race-choice__btn {
    display: flex;
    flex-direction: column
  }

  .race-img {
    background: #bfd2f4;
    padding-top: 65px;
    margin-top: -10px;
    position: static
  }

  .race-content__text {
    padding: 40px 20px;
    color: #fff;
    border-radius: 0 0 16px 16px;
    background: radial-gradient(128% 100% at 50% 0, #2f68b7 12.56%, #182e57 75.7%, #1f2c5a 93.15%)
  }

  .race-content__text .content-item {
    color: #fff
  }

  .footer-title.gold, .header__nav-item.active > .header__nav-item__link {
    color: #ffc039
  }

  .race-choice__btn {
    position: relative;
    z-index: 3;
    align-items: center;
    justify-content: space-between;
    background: radial-gradient(213.27% 499.58% at 46.94% 265.42%, #357dea 0, #090f27 47.05%);
    border-radius: 14px;
    padding: 12px 12px 12px 20px
  }

  .item-content-text, .item-content__img {
    border-radius: 0 0 16px 16px;
    position: relative
  }

  .about-block .subtitle_light, .race-item__content.open {
    display: block
  }

  .race-item__content {
    position: relative;
    top: -24px
  }

  .race-item_header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center
  }

  .race-choice__item:not(:last-child) {
    margin-bottom: 16px
  }

  .item-content__img {
    z-index: 2;
    background: url(image.png), #bfd2f4;
    padding-top: 20px
  }

  .item-content-text {
    top: -10px;
    z-index: 1;
    background: radial-gradient(128% 100% at 50% 0, #2f68b7 12.56%, #182e57 75.7%, #1f2c5a 93.15%);
    padding: 42px 20px 24px
  }

  .item-content__title {
    font-family: Manrope-Medium, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 130%;
    color: #fff
  }

  .classes-img, .info-block img {
    width: 32px;
    height: 32px
  }

  .arrow {
    width: 22px;
    height: 12px
  }

  .server-online {
    justify-content: center
  }

  .about-server .server-online, .statistics .server-online {
    justify-content: flex-start
  }

  .server-box {
    margin-bottom: 30px
  }

  .statistics-info {
    padding: 8px 0
  }

  .about-server .container, .statistics-info__inner {
    align-items: flex-start
  }

  .info-text {
    font-size: 14px;
    max-width: 175px
  }

  .server-content {
    margin: 0 auto
  }

  .about-img {
    width: 40px;
    height: 40px
  }

  .block-subtitle {
    line-height: 130%
  }

  .x-block {
    gap: 16px 24px
  }

  .banner__prizes__title, .x-count {
    font-size: 24px
  }

  .x-bonus {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #438cec
  }

  .best-item:not(:first-child), .best-text:not(:first-child), .info-item .info-link, .news-text__laptop, .x-bonus::before {
    display: none
  }

  .news {
    padding-top: 9vh;
    background: #070b18
  }

  .news-text {
    display: block
  }

  .news-icon {
    top: 20px;
    left: 20px
  }

  .news-item {
    max-width: 302px !important
  }

  .news-item-wrapper {
    margin: 0 10px
  }

  .awards-btn, .footer .footer-website {
    margin-top: 0
  }

  .more-info .btn {
    width: 100%;
    text-transform: uppercase
  }

  .news .swiper .swiper-pagination {
    top: 0;
    padding-top: 30px;
    padding-bottom: 10px
  }

  .stream {
    padding: 40px 0 5vh
  }

  .stream-block {
    max-width: 302px;
    margin-bottom: 0
  }

  .best .more-info {
    margin-bottom: 20px
  }

  .banner__prizes__desc, .best-info, .social-text, .website-desc {
    font-size: 14px
  }

  .table__item-col .icon {
    width: 20px;
    height: 20px
  }

  .awards {
    padding: 130px 20px 292px;
    margin-bottom: -1px
  }

  .awards-img__left {
    top: -205px;
    left: -20px;
    transform: scale(1)
  }

  .awards-block .h2-title, .server .subtitle, .server__text-block .subtitle {
    text-align: center
  }

  .awards .block-subtitle {
    font-size: 14px;
    max-width: 295px
  }

  .awards-btn {
    width: 100%
  }

  .awards-img__right-laptop {
    top: 164px;
    right: -20px
  }

  .awards-block {
    margin-bottom: 24px
  }

  .friends .changes-block, .news .subtitle_light, .news-block {
    margin: 0
  }

  .contacts-block {
    flex-direction: column;
    align-items: stretch
  }

  .btn-desc {
    font-size: 12px;
    line-height: 130%
  }

  .banner__prizes__body_wrap {
    padding: 0;
    background: 0 0
  }

  .banner__prizes__wrapper {
    border-radius: 24px;
    padding: 24px 20px;
    position: relative;
    z-index: 3;
    background: radial-gradient(148.25% 807.19% at 32.2% 110.25%, #357dea 0, #090f27 47.52%)
  }

  .banner__prizes-bg {
    left: 0;
    bottom: auto;
    top: 0;
    width: 100%
  }

  .banner__prizes__items {
    gap: 16px
  }

  .footer-top {
    flex-direction: column;
    margin-bottom: 0
  }

  .footer-info {
    flex-direction: column;
    gap: 40px;
    padding-bottom: 40px
  }

  .footer-wrap {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    margin-bottom: 20px
  }

  .icon-plus, .table__item.active {
    display: block
  }

  .info-item {
    border-bottom: .4px solid rgba(255, 255, 255, .4)
  }

  .icon-plus {
    background: url(https://frontend-static-eu.scrydecdn.com/high-five-x50/assets/img/svg/footer-plus.svg) 0 0/contain no-repeat;
    width: 24px;
    height: 24px
  }

  .info-item.active .icon-plus {
    background: url(https://frontend-static-eu.scrydecdn.com/high-five-x50/assets/img/svg/minus.svg)
  }

  .footer-link:not(:last-child), .footer-title {
    margin-bottom: 0
  }

  .social-btn .btn-bordered-box {
    padding: 9px 11px
  }

  .footer-bottom {
    flex-direction: column;
    gap: 40px;
    border-top: .4px solid rgba(255, 255, 255, .4)
  }

  .footer-bottom__info {
    flex-direction: column;
    gap: 20px
  }

  .footer {
    position: relative;
    z-index: 2;
    padding-top: 52px
  }

  .info-item.active .info-link {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-bottom: 24px;
    max-height: 130px;
    gap: 10px 33px
  }

  .footer-link {
    max-width: calc(50% - 20px);
    width: 100%;
    white-space: nowrap
  }

  .news-img, .stream-block-img, .table__item-part, img {
    max-width: 100%
  }

  .footer-info__item:hover, .footer-link:hover {
    color: #ffc342
  }

  .table__item {
    width: 100%;
    display: none
  }

  .benefits-wrap {
    gap: 0
  }

  img {
    width: auto;
    height: auto
  }

  .server-content {
    flex-direction: column-reverse;
    align-items: center;
    gap: 40px
  }

  .benefits-card {
    max-width: 323px;
    width: 100%
  }

  .news .swiper, .stream .swiper {
    margin: 0 -20px
  }

  .server-block {
    width: 100%;
    max-width: 420px
  }

  .awards-img__left.desktop-hidden, .mobile-hidden {
    display: none !important
  }

  .desktop-hidden {
    display: block !important
  }

  .bg-image .mobile-hidden, .server-item.active .mobile-hidden {
    display: inline-block !important
  }

  .news .swiper {
    padding-top: 40px
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: none !important
  }

  .benefits {
    background: #070b18
  }

  .server__block-inner {
    display: flex;
    flex-direction: column-reverse
  }

  .banner__prizes-bg, .banner__prizes-bg-2, .header__nav, .header__nav-item_sub:hover .header__nav-item_submenu, .news-item.block-bordered-gray:after, .overlay::before, .table__item-heading {
    display: none
  }

  .server-name {
    gap: 20px
  }

  .online-text {
    font-size: 16px
  }

  .discord-block iframe {
    width: 100%;
    margin-top: 40px
  }

  .start-game .btn {
    width: 58%
  }

  .btn, .choice-text, .table__item-col {
    font-size: 14px
  }

  .awards .container {
    padding: 0;
    position: relative
  }

  .awards-img__right-sky {
    position: absolute;
    right: -40px;
    top: auto;
    bottom: -250px
  }

  .overlay, .race-choice {
    position: relative
  }

  .table__item-clans .table__item-col:nth-child(2) {
    max-width: 30%
  }

  .stream .swiper {
    padding-top: 0
  }

  .race-choice {
    width: 100%;
    top: 0
  }

  .race-choice-wrapper {
    padding: 18px 20px;
    border-radius: 14px;
    align-items: center
  }

  .classes {
    max-width: unset;
    justify-content: flex-start
  }

  .race__block-content {
    display: none;
    flex-direction: column
  }

  .server-box {
    max-width: 340px
  }

  .changes .container-second {
    padding-bottom: 440px
  }

  .awards-blocks {
    padding: 28px 20px;
    z-index: 2
  }

  .banner__prizes {
    padding-top: 250px
  }

  .banner__prizes__right-img {
    top: -220px;
    right: -70px
  }

  .awards-img__right {
    top: 60%
  }

  .banner_prizes-bg-mobile {
    display: block;
    width: 100%;
    position: absolute;
    top: -120px;
    right: 0;
    left: 0;
    object-fit: cover
  }

  .race .container-second {
    top: 0;
    gap: 10px
  }

  .race-choice:after {
    border-radius: 14px
  }

  .server-inner .block-title {
    font-size: 16px;
    text-transform: uppercase
  }

  .swiper {
    padding-left: 20px;
    padding-right: 20px
  }

  .changes::after {
    background-image: url(https://frontend-static-eu.scrydecdn.com/high-five-x50/assets/img/changes-sky__1-mob.png);
    bottom: -70px
  }

  .changes-text .subtitle_light {
    max-width: 245px
  }

  .discord-block::after {
    top: 39px
  }

  .header__nav-item_sub-lang.active .header__nav-item_submenu {
    display: flex
  }

  .header__nav-item.active > .header__nav-item__link path {
    fill: #ffc039
  }

  .header__nav-item.active.header__nav-item_sub::after {
    content: url(https://frontend-static-eu.scrydecdn.com/high-five-x50/assets/img/svg/dropdown-arrow__hover.svg);
    transform: rotate(180deg);
    transition: transform .7s;
    width: 16px;
    height: 16px
  }

  .block-icons .social-btn .btn-bordered-box {
    padding: 9px 12px !important
  }
}

@media screen and (max-width: 514px) {
  .start-game .btn {
    width: 100%
  }
}

@media screen and (max-width: 420px) {
  .awards-img__left.desktop-hidden {
    display: block !important;
    width: 100vw;
    right: -20px;
    left: -20px;
    max-width: 100vw
  }

  .race-content__text {
    padding: 24px 20px
  }
}

@media screen and (max-width: 375px) {
  .h1-title {
    font-size: 32px
  }

  .changes-text .subtitle_light {
    max-width: 245px
  }

  .h2-title, .h2-title_black {
    font-size: 24px
  }

  .server-item-wrapper > span:hover {
    background: linear-gradient(0deg, #d7e8ff 48.81%, rgba(108, 128, 156, .6) 64.52%, rgba(215, 232, 255, .6) 82.62%), #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
  }

  .server-inner .block-title {
    font-size: 18px
  }

  .table__item-part {
    max-width: 330px
  }

  .table__item-pink .table__item-inner:after {
    background: 0 0
  }

  .table__item-inner_box {
    padding: 32px 0
  }

  .table__item-pink .table__item-inner_box {
    background: radial-gradient(230.47% 295.42% at 50% 0, #040815 22.04%, #000 100%)
  }

  .contacts-block {
    gap: 20px
  }

  .footer-link {
    display: block;
    font-size: 14px
  }
}

@media screen and (max-width: 335px) {
  .online-count, .server-title {
    font-size: 16px
  }

  .online-text {
    font-size: 14px
  }
}