.hero { padding-top: 15.4em; padding-bottom: 135px; position: relative; z-index: 2; overflow: hidden; } .hero-bg { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; } .hero-bg__slide { background-size: cover; background-repeat: no-repeat; background-position: center bottom; } .hero__main { display: flex; flex-direction: column; color: var(--white); max-width: 710px; } .hero-games__slide a { display: flex; width: 100%; padding: 35px; height: 300px; justify-content: center; } .hero__trust { margin-bottom: 34px; min-height: 32px; } .hero__title { font-size: 96px; font-weight: 700; line-height: normal; letter-spacing: -3.84px; margin-bottom: 32px; } .hero__text { font-size: var(--font-h5); line-height: 1.34; max-width: 550px; } .hero__btns { margin-top: 64px; display: flex; gap: 32px; } .hero__btn { padding: 17px 64px; font-size: var(--font-body-small); } .hero__container { display: flex; gap: 120px; align-items: flex-end; } .hero__game { display: flex; flex-direction: column; position: relative; flex: 1; } .hero-games__swiper { width: 590px; } .hero-games { border-radius: 16px 16px 0px 0px; background: rgba(6, 3, 12, 0.3); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); overflow: hidden; } .hero-games__slide { display: flex; align-items: center; justify-content: center; text-align: center; } .hero-games__slide img { height: auto; max-height: 266px; width: 100%; max-width: 395px; object-fit: contain; } .hero-games__wrapper { align-items: stretch; } .hero-games__progress { position: absolute; left: 0; bottom: 20px; width: 0; height: 3px; background: #fff; z-index: 5; width: 100%; } .hero-games__progress { position: absolute; left: 0; bottom: 0; } .hero-games__progress--start .progress__line { animation: changeWidth 4500ms linear; animation-fill-mode: forwards; } @keyframes changeWidth { 0% { width: 0%; } 100% { width: 100%; } } .hero__newest { display: flex; text-align: right; justify-content: right; } .hero-pagination { display: flex; gap: 8px; margin-top: 16px; } .hero-pagination__item { display: flex; align-items: center; position: relative; transition: var(--transition); cursor: pointer; } .hero-pagination__item--active { background: rgba(255, 255, 255, 0.05); border-radius: 8px; max-width: 100%; flex: 1; overflow: hidden; } .hero-pagination__img { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 8px; } .hero-pagination__img img { width: 100%; height: auto; } .hero-pagination__content { display: flex; flex-direction: column; transition: var(--transition); position: relative; pointer-events: none; opacity: 0; max-width: 0; visibility: hidden; overflow: hidden; padding-right: 8px; } .hero-pagination__item--active .hero-pagination__content { opacity: 1; pointer-events: all; transform: translateX(0); visibility: visible; max-width: calc(100vw - 144px); } .hero-pagination__name { font-weight: 700; line-height: 1.36; letter-spacing: 0.18px; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .hero-pagination__text { letter-spacing: var(--letter-spacing-normal); font-size: var(--font-body-small); line-height: 1.26; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .hero { padding-top: 17.1em; padding-bottom: 140px; } .hero__trust { display: none; } .hero__container { align-items: flex-start; gap: 28px } .hero__game { max-width: 600px; } .hero__main { flex: 1; max-width: none; } .hero__title { line-height: 100%; } .hero-pagination--mobile, .hero__btns--mobile, .hero-bg .swiper-pagination, .hero-block__hot { display: none; } @media (max-width: 1540px) { .hero-games__swiper { width: 100%; } .hero__game { flex-basis: 40.3%; max-width: 40.3%; } .hero-pagination__item--active { flex: unset; } .hero-pagination__content { display: none; } } @media (max-width: 1250px) { .hero__title { font-size: 70px; } .hero-games__slide a { height: 250px; } } @media (min-width: 1699px) { .hero { min-height: 98.4vh; } } @media (min-width: 1921px) { .hero { min-height: 87vh; padding-top: 15%; } } @media (max-width: 1920px) and (min-width: 1600px) and (min-height: 1081px) { .hero { min-height: 1px; max-height: 937px; } } @media (max-width: 1445px) and (min-width: 1411px) { .hero__container { gap: 32px; } } @media (max-width: 1439px) { .hero__container { padding: 0 32px; } } @media screen and (max-width: 1439px) and (min-width: 1016px) { .hero-pagination__content { display: none; } .hero-pagination__item--active { flex: 0 0 auto; } } @media (max-width: 1260px) and (min-width: 1016px) { .hero-games__swiper { width: 100%; } .hero-pagination { flex-wrap: wrap; } .hero-pagination__item { flex: 0 0 auto; } .hero-pagination__text{ text-overflow: ellipsis; overflow: hidden; max-width: 77%; white-space: nowrap; } } @media (max-width: 1150px) { .hero__btn { padding: 14px 32px; } } @media (max-width: 1090px) { .hero { padding-top: 200px; padding-bottom: 70px; } .hero-pagination__content { width: 208px; } .hero-pagination__name { font-size: 16px; } .hero-pagination__img { width: 69px; height: 72px; } .hero-pagination { flex-wrap: wrap; justify-content: flex-start; } } @media (max-width: 930px) { .hero { margin-bottom: 50px; } .hero__container { flex-direction: column; align-items: flex-start; } .hero__title { font-size: 92px; line-height: 100%; letter-spacing: -3.68px; margin-bottom: 16px; } .hero__text { font-size: 24px; line-height: 134%; } .hero__btn { padding: 18px 64px; } .hero__game { margin-top: 44px; align-items: flex-start; flex-direction: row; flex-wrap: wrap; } .hero__newest { flex: 1 0 100%; text-align: left; justify-content: left; } .hero-games__swiper { width: 445px; } .hero-pagination { flex: 1; align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; margin-left: 30px; } .hero-pagination__item.hero-pagination__item--active { flex: 1 0 50%; } .hero-pagination__content { opacity: 1; } .hero-bg { position: static; height: 310px; border-radius: 16px 16px 0 0; } .hero-pagination--mobile { display: flex; flex-wrap: nowrap; position: absolute; margin: 0; bottom: 7px; z-index: 1; left: 40px; right: 40px; max-width: 100%; } .hero-pagination__content { display: block; } .hero-pagination__item--active .hero-pagination__content { max-width: 100%; } .hero-games__progress { bottom: -7px; border-radius: 16px; background: rgba(6, 6, 6, 0.60); } .hero-pagination__text { display: none; } .hero__btns--mobile { display: flex; } .hero-pagination--mobile { flex-wrap: nowrap; } .hero__main .hero__btns { display: none; } .hero__game { display: none; } .hero-bg__block { position: relative; max-width: 800px; padding: 0 32px; margin: 32px auto 0; } .hero-pagination__content { opacity: 0; } .hero-pagination__item.hero-pagination__item--active { flex: 1; } .hero-pagination__item { cursor: pointer; } .hero-bg .swiper-pagination { display: block; bottom: -30px; } .hero-bg span.swiper-pagination-bullet { width: 14px; height: 14px; background: #2C173C; } .hero-bg span.swiper-pagination-bullet.swiper-pagination-bullet-active { background: #8801DB } .hero { padding-top: 112px; } } @media (max-width: 767px) { .hero__container, .hero-bg__block, .header__container { padding: 0 16px; } .hero-pagination--mobile { left: 32px; right: 32px; } .hero__btns--mobile { width: 100%; margin-top: 78px; } .hero__btn { flex: 1; text-align: center; justify-content: center; padding: 18px; } .header { position: relative; } .hero { padding-top: 42px; } } @media (max-width: 730px) { .hero-games { flex: 1 0 100%; } .hero__title { font-size: 70px; } } @media (max-width: 650px) { .hero-pagination__content { display: none; } .hero-pagination__item.hero-pagination__item--active { flex: unset; } } @media (max-width: 545px) { .hero__btns { flex-direction: column; gap: 16px; margin-top: 32px; } .hero__btn { text-align: center; justify-content: center; } .hero-bg { display: none; } .hero-pagination--mobile { position: static; } .hero-games__progress { display: none; } .hero-pagination__content { opacity: 1; pointer-events: all; width: 100%; position: relative; left: 0; padding-right: 8px; max-width: 100%; transform: translateX(0); visibility: visible; margin-left: 0; overflow: hidden; display: block; } .hero-pagination__item, .hero-pagination__item.hero-pagination__item--active { max-width: calc(50% - 4px); flex-basis: calc(50% - 4px); border-radius: 8px; background: rgba(255, 255, 255, 0.05); } .hero-block__hot { display: flex; align-items: center; border-radius: 8px; background: rgba(39, 245, 209, 0.30); gap: 8px; font-size: 14px; line-height: 1.26; letter-spacing: 0.14px; font-weight: 700; padding: 8px; margin: 32px 0 16px; text-transform: uppercase; max-width: 131px; color: #27F5D1; } .hero-pagination--mobile { flex-wrap: wrap; } .hero__title { font-size: 58px; line-height: 100%; letter-spacing: -1.84px; } .hero { margin-bottom: 0; padding-bottom: 80px; } } @media (max-width: 478px) { .hero__title { font-size: 46px; } .hero__text { font-size: 20px; line-height: 118%; } .hero__main { display: block; position: relative; z-index: 10; } .hero__btns { order: 5; margin-top: 40px; width: 100%; } .hero__container { gap: 0; } .hero__trust { margin-bottom: 20px; } .hero__game { margin-top: 140px; } .hero { padding-top: 16px; margin-bottom: 0; } .hero-games__swiper { width: 335px; } .hero-games__slide a { height: 184px; } .hero-bg__slide { background-position: center; background-size: auto 474px } .hero-bg { top: 80px; } .hero-pagination__name { font-size: 16px; line-height: 128%; letter-spacing: 0.16px; } .hero-pagination__content { position: relative; left: 0; padding-right: 8px; width: 100%; max-width: 100%; transform: translateX(0); visibility: visible; margin-left: 0; overflow: hidden; } } @media (max-width: 400px) { .hero__text { font-size: 20px; } .hero__title { font-size: 52px; } } @media (max-width: 370px) { .hero__title { font-size: 41px; } .hero__text { font-size: 18px; } .hero-pagination__item, .hero-pagination__item.hero-pagination__item--active { max-width: 100%; flex-basis: 100%; } .hero-pagination__content { padding-left: 8px; } } @media (max-width: 360px) { .hero__btn { padding: 16px 64px; } .hero-games__slide a { height: 195px; } }