@charset "UTF-8";
*:before, *, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

* {
    padding: 0;
    margin: 0;
    border: 0
}

:focus, :active {
    outline: none
}

a:focus, a:active {
    outline: none
}

nav, footer, header, aside {
    display: block
}

html, body {
    min-height: 100%;
    width: 100%;
    font-size: 16px;
    line-height: 1;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

input, button, textarea {
    font-family: inherit
}

input::-ms-clear {
    display: none
}

button {
    cursor: pointer
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

a {
    text-decoration: none;
    color: inherit
}

a:hover {
    text-decoration: none
}

ul li, ol li {
    list-style: none;
    padding-left: 0
}

img {
    vertical-align: top
}

.wp-admin h1,
.wp-admin h2,
.wp-admin h3,
.wp-admin h4,
.wp-admin h5 {
    color: #000;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: 400
}

.wrapper {
    position: relative;
    width: 100%;
    max-width: calc(var(--width-container) + var(--offsets, 20px) * 2);
    margin: var(--wrapper-margin) auto 0;
    padding: 0 var(--offsets, 20px)
}

.wrapper > .btn:not(:first-child) {
    margin-top: 20px
}

.wrapper:first-child {
    margin-top: 24px
}

@media (max-width: 767.9px) {
    .wrapper > .btn {
        width: 100%
    }

    .wrapper > .btn:not(:first-child) {
        margin-top: 16px
    }
}

@media (max-width: 575.9px) {
    .wrapper:first-child {
        margin-top: 16px
    }
}

h3, h4, h5, h6 {
    margin-bottom: 24px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

h3:not(:first-child), h4:not(:first-child), h5:not(:first-child), h6:not(:first-child) {
    margin-top: 24px
}

@media (max-width: 575.9px) {
    h3, h4, h5, h6 {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--on-surface-on-surface-light, #fff)
}

p:not([class]) {
    margin-top: 24px
}

p:not([class]):first-child {
    margin-top: 0
}

p:not([class]) a:not([class]), ul:not([class]) a:not([class]), ol:not([class]) a:not([class]) {
    color: var(--primary-primary-focus, #80b0ff);
    transition-property: color;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

p:not([class]) a:not([class]):active, ul:not([class]) a:not([class]):active, ol:not([class]) a:not([class]):active {
    color: var(--primary-primary, #397dff);
    text-decoration: underline;
    text-underline-offset: 3px
}

@media (any-hover: hover) {
    p:not([class]) a:not([class]):hover, ul:not([class]) a:not([class]):hover, ol:not([class]) a:not([class]):hover {
        color: var(--primary-primary, #397dff);
        text-decoration: underline;
        text-underline-offset: 3px
    }

    p:not([class]) a:not([class]):focus, ul:not([class]) a:not([class]):focus, ol:not([class]) a:not([class]):focus {
        color: var(--primary-primary, #397dff);
        text-decoration: underline;
        text-underline-offset: 3px
    }
}

h1 {
    margin-bottom: 32px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.5rem;
    letter-spacing: .12px
}

@media (max-width: 575.9px) {
    h1 {
        font-size: 1.5rem;
        line-height: 2rem;
        letter-spacing: -0.1px
    }
}

h2 {
    margin-bottom: 32px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.5rem;
    letter-spacing: .12px
}

@media (max-width: 575.9px) {
    h2 {
        font-size: 1.5rem;
        line-height: 2rem;
        letter-spacing: -0.1px
    }
}

@media (max-width: 575.9px) {
    h2 {
        margin-bottom: 24px
    }
}

h3:not([class]) {
    margin-top: 20px
}

@media (max-width: 575.9px) {
    h3:not([class]) {
        margin-top: 20px
    }
}

ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px
}

ul:not([class]):not(:first-child), ul.wp-block-list:not(:first-child), ol:not([class]):not(:first-child), ol.wp-block-list:not(:first-child) {
    margin-top: 16px
}

ul:not([class]) li, ul.wp-block-list li, ol:not([class]) li, ol.wp-block-list li {
    position: relative
}

ul:not([class]) li > .btn, ul.wp-block-list li > .btn, ol:not([class]) li > .btn, ol.wp-block-list li > .btn {
    margin-top: 8px
}

ol:not([class]), ol.wp-block-list {
    counter-reset: ol-default
}

ol:not([class]) li, ol.wp-block-list li {
    counter-increment: ol-default;
    padding-left: 32px
}

ol:not([class]) li::before, ol.wp-block-list li::before {
    position: absolute;
    content: counter(ol-default);
    left: 0;
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5rem;
    color: var(--tertiary-tertiary, #6f6bff)
}

ol:not([class]) li::after, ol.wp-block-list li::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 22px;
    height: 14px;
    width: 1px;
    background: var(--tertiary-tertiary, #6f6bff)
}

ul:not([class]) li, ul.wp-block-list li {
    padding-left: 26px
}

ul:not([class]) li::before, ul.wp-block-list li::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M12.643 8.152a1 1 0 0 1 0 1.696L7.53 13.044A1 1 0 0 1 6 12.196V5.804a1 1 0 0 1 1.53-.848z" fill="%236F6BFF"/></svg>');
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px
}

.wrapper > h2 {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 32px;
    row-gap: 16px
}

.wrapper > h2::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--outline-outline, #3a4b59);
    min-width: 50px
}

@media (max-width: 575.9px) {
    .wrapper > h2 {
        gap: 16px
    }
}

@font-face {
    font-family: "Lato";
    font-display: swap;
    src: url("../fonts/Lato-Black.woff2") format("woff2"), url("../fonts/Lato-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal
}

@font-face {
    font-family: "Lato";
    font-display: swap;
    src: url("../fonts/Lato-Bold.woff2") format("woff2"), url("../fonts/Lato-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: "Lato";
    font-display: swap;
    src: url("../fonts/Lato-Light.woff2") format("woff2"), url("../fonts/Lato-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: "Lato";
    font-display: swap;
    src: url("../fonts/Lato-Regular.woff2") format("woff2"), url("../fonts/Lato-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Lato";
    font-display: swap;
    src: url("../fonts/Lato-Thin.woff2") format("woff2"), url("../fonts/Lato-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal
}

.form {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px
}

.form > .btn {
    width: 100%
}

.form__label {
    min-height: 48px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
    display: flex
}

.form__label + .form__label {
    margin-top: 6px
}

.form__label-text {
    position: absolute;
    left: 14px;
    top: 16px;
    background: var(--surface-container-high, #282b24);
    color: var(--on-surface-variant, #c3c8bb);
    padding-inline: 2px;
    pointer-events: none;
    transition-property: transform, top, color;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.form__label-error {
    position: relative;
    left: 8px;
    display: none;
    align-items: center;
    gap: 6px;
    color: var(--error, #ffb4ab)
}

.form__label.has-value input, .form__label.has-value textarea {
    border-color: var(--primary, #7ade50);
    box-shadow: 0 0 0 1px var(--primary, #7ade50)
}

.form__label.has-value .form__label-text {
    top: 0px;
    transform: translateY(-50%);
    color: var(--primary, #7ade50)
}

.form__label.has-error input, .form__label.has-error textarea {
    border-color: var(--error, #ffb4ab) !important;
    box-shadow: 0 0 0 1px var(--error, #ffb4ab) !important
}

.form__label.has-error .form__label-text {
    color: var(--error, #ffb4ab) !important
}

.form__label.has-error .form__label-error {
    display: flex
}

.form input, .form textarea {
    font-size: 1.125rem;
    line-height: 136%;
    color: var(--on-surface-var, #c0c8d8)
}

.form input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0);
    border-radius: 4px;
    border: 1px solid var(--outline, #8d9287);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
    color: var(--on-surface, #e1e4d9);
    transition-property: border-color, box-shadow;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (any-hover: hover) {
    .form input:hover {
        border-color: var(--on-surface, #e1e4d9)
    }

    .form input:hover + .form__label-text {
        color: var(--on-surface, #e1e4d9)
    }
}

.form input:focus {
    border-color: var(--primary, #7ade50);
    box-shadow: 0 0 0 1px var(--primary, #7ade50)
}

.form input:focus ~ .form__label-text, .form input:focus .form__label-text {
    top: 0px;
    transform: translateY(-50%);
    color: var(--primary, #7ade50)
}

.form .form__response {
    position: absolute;
    top: calc(100% + 10px);
    width: 100%;
    text-align: center
}

.no-scroll {
    overflow: hidden
}

html {
    font-size: var(--font-default)
}

@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: 10px;
        scrollbar-color: var(--primary-primary, #397dff) rgba(0, 0, 0, 0)
    }
}

html::-webkit-scrollbar {
    width: 10px
}

html::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--primary-primary, #397dff)
}

html::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0)
}

body {
    background: var(--surface-surface, #121a21);
    color: var(--on-surface-on-surface-dark, #8fa3b5);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100vh;
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    letter-spacing: .1px
}

@media (max-width: 575.9px) {
    body {
        font-size: 0.9375rem
    }
}

main {
    flex-grow: 1
}

table {
    width: 100%;
    table-layout: auto;
    border-spacing: 0
}

img, svg {
    max-width: 100%;
    height: auto
}

body {
    display: grid;
    grid-template-columns:354px 1fr 352px;
    grid-template-rows:1fr auto;
    column-gap: 32px
}

body .wrapper {
    max-width: 100%
}

body.gscrollbar-fixer {
    margin-inline: auto;
    padding-right: 10px
}

.footer {
    grid-column: 2/3
}

main {
    min-width: 0
}

@media (min-width: 2210px) {
    body {
        max-width: 2210px;
        margin-inline: auto
    }

    body.gscrollbar-fixer {
        margin-inline: auto calc((100vw - 2210px) / 2 + 5px);
        padding-right: 0
    }
}

@media (max-width: 1600px) {
    body {
        grid-template-columns:300px 1fr 280px
    }
}

@media (max-width: 1440px) {
    body {
        grid-template-columns:250px 1fr 280px;
        column-gap: 20px
    }
}

.wrapper--accent {
    background: #1f2b35;
    padding: 16px;
    border-radius: 16px;
}


@media (max-width: 1200px) {
    .header {
        grid-column: 1/-1
    }

    body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start
    }
}

:root {
    --offsets: 20px;
    --width-container: 1150px;
    --wrapper-margin: 48px;
    --layout-grid-large: 1600px;
    --layout-grid-default: 1440px;
    --font-default: 16px;
    --ff-lato: "Lato", sans-serif;
    --star-color: #ff8f4a;
    --star-bg: transparent;
    --surface-surface: #121a21;
    --on-surface-on-surface-light: #fff;
    --primary-primary: #397dff;
    --primary-primary-hover: #699eff;
    --primary-primary-focus: #fff;
    --primary-primary-disabled: #446089;
    --secondary-secondary: #369aff;
    --secondary-secondary-hover: #6fb5ff;
    --secondary-secondary-focus: #95c9fc;
    --secondary-secondary-disabled: #5c7896;
    --tertiary-tertiary: #6f6bff;
    --tertiary-tertiary-hover: #9694ff;
    --tertiary-tertiary-focus: #9ea0fc;
    --tertiary-tertiary-disabled: #5754a0;
    --states-hovered: rgba(255, 255, 255, 0.08);
    --states-focused: rgba(255, 255, 255, 0.12);
    --on-surface-on-surface-dark: #8fa3b5;
    --surface-container-surface-container-disabled: #1b2a36;
    --surface-container-surface-container: #1f2b35;
    --on-surface-on-surface: #dce9f3;
    --states-success: #00d27f;
    --states-error: #ff3b4e;
    --on-surface-on-surface-dark: #8fa3b5;
    --tertiary-tertiary: #6f6bff;
    --outline-outline: #3a4b59
}

@media (max-width: 575.9px) {
    :root {
        --offsets: 16px;
        --wrapper-margin: 32px
    }
}

.header {
    position: relative;
    --header-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 28px;
    padding: 24px 32px;
    background: var(--surface-container-surface-container, #1f2b35);
    transition-property: background;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (min-width: 1200.1px) {
    .header {
        height: 1096px;
        max-height: 100svh
    }
}

@media (max-width: 1440px) {
    .header {
        padding: 16px
    }
}

@media (min-width: 1200.1px) {
    .header {
        overflow-y: auto;
        overflow-x: hidden
    }

    @supports not selector(::-webkit-scrollbar) {
        .header {
            scrollbar-width: thin;
            scrollbar-color: var(--primary-opacity-012, rgba(208, 188, 255, 0.12)) rgba(0, 0, 0, 0)
        }
    }.header::-webkit-scrollbar {
         width: 4px
     }

    .header::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: var(--primary-opacity-012, rgba(208, 188, 255, 0.12));
        border-radius: 9px;
        border: 4px solid rgba(0, 0, 0, 0)
    }

    .header::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0);
        border-radius: 9px
    }
}

@media (max-width: 1200px) {
    .header {
        padding-block: 16px;
        flex-direction: row;
        align-items: center;
        padding-inline: calc((100vw - var(--width-container)) / 2)
    }
}

@media (max-width: 1190px) {
    .header {
        padding-inline: var(--offsets, 20px)
    }
}

@media (max-width: 991.9px) {
    .header {
        padding-block: 8px
    }
}

@media (max-width: 575.9px) {
    .header {
        flex-wrap: wrap;
        gap: 16px
    }
}

.header__logo {
    display: flex
}

.header__logo:is(a) {
    transition-property: opacity;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (any-hover: hover) {
    .header__logo:is(a):hover {
        opacity: .6
    }
}

.header__logo:is(a):active {
    opacity: .6
}

@media (any-hover: hover) {
    .header__logo:is(a):focus {
        opacity: .6
    }
}

.header__logo img, .header__logo svg {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain
}

@media (max-width: 1200px) {
    .header__logo img, .header__logo svg {
        max-width: 300px;
        max-height: 40px
    }
}

.header__nav {
    z-index: 50
}

@media (max-width: 991.9px) {
    .header__nav {
        background: var(--surface-surface, #121a21);
        overflow-y: auto;
        margin-top: 6px;
        margin-inline: 16px;
        padding: 16px 0 16px;
        border-top: 1px solid var(--outline-outline-dark, #222f3b);
        position: absolute;
        top: 100%;
        left: 0;
        width: calc(100% - 32px);
        height: calc(100svh - var(--header-height))
    }

    @supports not selector(::-webkit-scrollbar) {
        .header__nav {
            scrollbar-width: thin;
            scrollbar-color: var(--primary-opacity-012, rgba(208, 188, 255, 0.12)) rgba(0, 0, 0, 0)
        }
    }.header__nav::-webkit-scrollbar {
         width: 4px
     }

    .header__nav::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: var(--primary-opacity-012, rgba(208, 188, 255, 0.12));
        border-radius: 9px;
        border: 4px solid rgba(0, 0, 0, 0)
    }

    .header__nav::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0);
        border-radius: 9px
    }
}

.header__burger {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    padding: 8px;
    margin: 2px;
    cursor: pointer;
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (min-width: 992px) {
    .header__burger {
        display: none
    }
}

@media (any-hover: hover) {
    .header__burger:hover {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08));
        border-radius: 10px
    }
}

.header__burger:active {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (any-hover: hover) {
    .header__burger:focus {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

.header__burger span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .2s ease .2s, background .2s
}

.header__burger span, .header__burger::before, .header__burger::after {
    width: 18px;
    height: 2px;
    background-color: #fff;
    border-radius: 3px
}

.header__burger::before, .header__burger::after {
    content: "";
    position: absolute
}

.header__burger::before {
    top: 11px;
    transition: top .2s ease .2s, transform .2s ease-out .1s, background .2s
}

.header__burger::after {
    bottom: 11px;
    transition: bottom .15s ease .2s, transform .15s ease-out .1s, background .2s
}

.header .header__btn {
    justify-content: flex-start
}

@media (max-width: 575.9px) {
    .header .header__btn {
        order: 100;
        width: 100%;
        max-width: 100%
    }
}

.header .header-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 32px
}

.header .header-menu .item a, .header .header-menu .item span {
    padding: 8px 16px;
    border-radius: var(--border-radius-radius-normal, 16px);
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--on-surface-on-surface-light, #fff);
    transition-property: background, color;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0px
}

@media (any-hover: hover) {
    .header .header-menu .item a:hover {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.header .header-menu .item a:active {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (any-hover: hover) {
    .header .header-menu .item a:focus {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

@media (max-width: 1200px) {
    .header .header-menu {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 20px;
        row-gap: 8px
    }
}

@media (max-width: 991.9px) {
    .header .header-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px
    }
}

@media (max-width: 991.9px) {
    .header:not(.menu-active) .header__nav {
        display: none
    }
}

.header.menu-active .header__burger:before {
    top: 17px;
    transform: rotate(45deg);
    transition: top .2s ease, transform .2s ease-out .2s
}

.header.menu-active .header__burger span {
    opacity: 0
}

.header.menu-active .header__burger::after {
    bottom: 17px;
    transform: rotate(-45deg);
    transition: bottom .2s ease, transform .2s ease-out .2s
}

@media (max-width: 991.9px) {
    .header.menu-active {
        background: var(--surface-surface, #121a21)
    }
}

.header__lang {
    cursor: pointer;
    position: relative;
    z-index: 60;
    padding: 8px;
    border-radius: var(--border-radius-radius-small, 8px);
    border: 1px solid var(--outline-outline, #3a4b59);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: var(--on-surface-on-surface, #dce9f3)
}

.header__lang::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none"><path d="M13.834 5.935 12.58 4.667 8.5 8.787l-4.08-4.12-1.253 1.268L8.5 11.333z" fill="%23DCE9F3"/></svg>');
    width: 16px;
    height: 16px;
    display: block;
    transition-property: transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.header__lang img, .header__lang svg {
    width: 24px;
    height: 24px;
    min-width: 24px;
    object-fit: contain
}

.header__lang.active::after {
    transform: rotate(-180deg)
}

.header__lang.active .header__lang-list {
    display: flex
}

@media (max-width: 1200px) {
    .header__lang {
        margin-left: auto;
        order: 20
    }
}

@media (max-width: 991.9px) {
    .header__lang {
        order: unset
    }
}

.header__lang-list {
    position: absolute;
    z-index: 1;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%;
    max-width: 200px;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: var(--border-radius-radius-small, 8px);
    background: #1a2025;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    display: none
}

@supports not selector(::-webkit-scrollbar) {
    .header__lang-list {
        scrollbar-width: thin;
        scrollbar-color: var(--primary-opacity-012, rgba(208, 188, 255, 0.12)) rgba(0, 0, 0, 0)
    }
}

.header__lang-list::-webkit-scrollbar {
    width: 4px
}

.header__lang-list::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: var(--primary-opacity-012, rgba(208, 188, 255, 0.12));
    border-radius: 9px;
    border: 4px solid rgba(0, 0, 0, 0)
}

.header__lang-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 9px
}

.header__lang-link {
    width: 100%;
    padding: 10px 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: var(--on-surface-on-surface, #dce9f3);
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (any-hover: hover) {
    .header__lang-link:hover {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

.footer {
    position: relative;
    padding-block: 0 48px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px
}

@media (max-width: 575.9px) {
    .footer {
        padding-block: 0 32px;
        gap: 16px
    }
}

.footer__logo {
    position: relative;
    transition-property: opacity;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (any-hover: hover) {
    .footer__logo:hover {
        opacity: .6
    }
}

.footer__logo:active {
    opacity: .6
}

@media (any-hover: hover) {
    .footer__logo:focus {
        opacity: .6
    }
}

.footer__logo-wrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px
}

.footer__logo-wrap::after {
    content: "";
    display: block;
    height: 1px;
    flex: 1;
    background: #3a4b59
}

.footer__logo img, .footer__logo svg {
    max-width: 150px;
    max-height: 56px
}

@media (max-width: 575.9px) {
    .footer__logo-wrap {
        gap: 16px
    }

    .footer__logo img, .footer__logo svg {
        max-width: 98px;
        max-height: 48px
    }
}

.footer__nav {
    width: 100%
}

.footer__nav-list {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    column-gap: 20px;
    row-gap: 16px
}

@media (max-width: 1600px) {
    .footer__nav-list {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 767.9px) {
    .footer__nav-list {
        grid-template-columns:1fr;
        justify-content: flex-start
    }
}

.footer__nav-list a {
    display: block;
    padding: 8px 16px;
    border-radius: var(--border-radius-radius-normal, 16px);
    color: var(--on-surface-on-surface-light, #fff);
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (any-hover: hover) {
    .footer__nav-list a:hover {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.footer__nav-list a:active {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (any-hover: hover) {
    .footer__nav-list a:focus {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

.footer__nav-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start
}

.footer__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.footer__row:not(:first-child) {
    margin-top: 16px
}

@media (max-width: 767.9px) {
    .footer__row {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start
    }
}

@media (max-width: 575.9px) {
    .footer__row {
        gap: 16px
    }
}

.footer__flags {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    flex-wrap: wrap
}

.footer__flags-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

.footer__flags img, .footer__flags svg {
    max-width: 32px;
    max-height: 25px;
    object-fit: contain
}

@media (max-width: 575.9px) {
    .footer__flags {
        gap: 16px
    }
}

.footer__copyright {
    color: var(--on-surface-on-surface-light, #fff);
    text-align: right
}

@media (max-width: 767.9px) {
    .footer__copyright {
        text-align: left
    }
}

.footer__logos {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap
}

.footer__logos img, .footer__logos svg {
    max-width: 100%;
    max-height: 48px
}

@media (max-width: 575.9px) {
    .footer__logos {
        gap: 16px
    }

    .footer__logos img, .footer__logos svg {
        max-height: 32px
    }
}

.footer__info, .footer__logos {
    padding-top: 24px;
    border-top: 1px solid #3a4b59
}

@media (max-width: 575.9px) {
    .footer__info, .footer__logos {
        padding-top: 16px
    }
}

.section-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
    margin-top: 0
}

.section-hero h1 {
    margin-bottom: 0;
}

@media (max-width: 575.9px) {
    .section-hero {
        gap: 16px
    }
}

.section-hero__block {
    padding: 16px;
    border-radius: 16px;
    background: var(--surface-container-surface-container, #1f2b35)
}

.section-hero__block h1 {
    margin-bottom: 24px
}

@media (max-width: 575.9px) {
    .section-hero__block h1 {
        margin-bottom: 16px
    }
}

.section-hero__demo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 550px;
    margin-top: 20px;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center center
}

.section-hero__demo::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(11, 20, 33, .7490196078)
}

.section-hero__demo-btns {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    max-width: 100%;
    margin-bottom: 66px
}

.section-hero__demo-btns .btn {
    width: 100%;
    max-width: 100%
}

@media (max-width: 575.9px) {
    .section-hero__demo {
        margin-top: 16px;
        height: 356px
    }

    .section-hero__demo-btns {
        margin-bottom: 81px
    }
}

.section-hero__game {
    display: grid;
    column-gap: 20px;
    row-gap: 16px
}

.section-hero__game > img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover
}

.section-hero__game-title {
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 2rem
}

@media (max-width: 575.9px) {
    .section-hero__game-title {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.section-hero__game-rate {
    color: var(--text-main, #fff);
    flex-direction: row;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 2rem
}

@media (max-width: 575.9px) {
    .section-hero__game-rate {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.section-hero__game-rate {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    --percent: calc(var(--rating, 4.5) / 5 * 100%)
}

.section-hero__game-rate::before, .section-hero__game-rate::after {
    font-size: 24px;
    line-height: 22px;
    height: 24px;
    font-weight: 400;
    letter-spacing: 0px
}

.section-hero__game-rate::before {
    content: "★★★★★";
    display: block;
    background: linear-gradient(90deg, var(--star-color) var(--percent), var(--star-bg) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.section-hero__game-rate::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "☆☆☆☆☆";
    display: block;
    letter-spacing: 0px;
    color: var(--star-color)
}

@media (max-width: 575.9px) {
    .section-hero__game-rate::before, .section-hero__game-rate::after {
        font-size: 18px;
        line-height: 16px;
        height: 18px;
        letter-spacing: 0px
    }
}

.section-hero__game-creator {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 8px
}

.section-hero__game-creator img {
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
    margin-right: 8px
}

.section-hero__game-name {
    color: var(--on-surface-on-surface-dark, #8fa3b5);
    padding-right: 12px;
    margin-right: 12px;
    border-right: 1px solid #222f3b
}

.section-hero__game-name span {
    color: var(--on-surface-on-surface, #dce9f3);
    margin-left: 8px
}

.section-hero__game-time {
    color: var(--on-surface-on-surface, #dce9f3)
}

.section-hero__game p:not([class]) {
    margin-top: 0;
    color: var(--on-surface-on-surface, #dce9f3)
}

@media (min-width: 768px) {
    .section-hero__game {
        grid-template-columns:320px 1fr auto;
        grid-template-rows:auto auto 1fr
    }

    .section-hero__game > * {
        grid-column: 2/-1
    }

    .section-hero__game > img {
        grid-column: 1/2;
        grid-row: 1/4
    }

    .section-hero__game-title {
        grid-column: 2/3
    }

    .section-hero__game-rate {
        grid-column: 3/4
    }
}

@media (max-width: 991.9px) {
    .section-hero__game-name {
        padding-right: 0;
        margin-right: 0;
        border-right: 0
    }

    .section-hero__game-time {
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid #222f3b
    }
}

@media (max-width: 767.9px) {
    .section-hero__game {
        grid-template-columns:1fr auto
    }

    .section-hero__game > * {
        grid-column: 1/-1
    }

    .section-hero__game-title {
        grid-column: 1/2
    }

    .section-hero__game-rate {
        grid-column: 2/3;
        align-self: flex-start
    }

    .section-hero__game > img {
        margin-bottom: 4px
    }
}

@media (max-width: 575.9px) {
    .section-hero__game-creator img {
        max-width: 18px;
        max-height: 18px
    }
}

.section-hero__info {
    padding: 24px 16px;
    border-radius: 16px;
    background: var(--surface-container-surface-container, #1f2b35)
}

.section-hero__info-body {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 40px;
    overflow: hidden
}

.section-hero__info-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px
}

.section-hero__info-col:not(:first-child)::after {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    width: 2px;
    height: 100%;
    background: var(--outline-outline, #3a4b59);
    border-radius: 4px
}

.section-hero__info-cell {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    color: var(--on-surface-on-surface-dark, #8fa3b5)
}

.section-hero__info-cell span {
    text-align: right;
    font-weight: 600;
    color: var(--on-surface-on-surface-light, #fff)
}

@media (max-width: 991.9px) {
    .section-hero__info-body {
        grid-template-columns:1fr
    }

    .section-hero__info-col:not(:first-child)::after {
        content: "";
        position: absolute;
        top: -20px;
        left: 0;
        width: 100%;
        height: 2px
    }
}

.section-hero__bonus {
    margin-top: 20px;
    padding: 16px;
    border-radius: 16px;
    background: var(--card-bg, #282220);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.section-hero__bonus-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    font-size: 18px;
    line-height: 150%;
    color: var(--text-main, #fff)
}

.section-hero__bonus-text span {
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    color: var(--accent-base, #feb923)
}

@media (max-width: 575.9px) {
    .section-hero__bonus {
        margin-top: 16px;
        flex-direction: column;
        align-items: stretch
    }

    .section-hero__bonus-text {
        gap: 6px;
        font-size: 16px
    }

    .section-hero__bonus-text span {
        font-size: 18px;
        line-height: 150%
    }

    .section-hero__bonus .btn {
        width: 100%
    }
}

.section-hero .winners-list:not(:first-child) {
    margin-top: 0
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, .6);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

.modal:not(.active) {
    display: none
}

.modal__content {
    position: relative;
    margin: auto var(--offsets, 20px);
    padding: 16px;
    width: 100%;
    max-width: calc(var(--width-container));
    max-height: calc(100vh - var(--offsets, 20px));
    border-radius: 16px;
    background: var(--surface-container-surface-container, #1f2b35);
    box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, .15), 0px 1px 3px 0px rgba(0, 0, 0, .3);
    overflow: hidden;
    display: grid;
    grid-template-columns:1fr auto;
    column-gap: 12px;
    row-gap: 16px;
    grid-template-rows:auto 1fr auto
}

.modal__content > * {
    grid-column: 1/-1
}

.modal__content .modal__title {
    grid-column: 1/2
}

.modal__content .modal__close {
    grid-column: 2/3
}

.modal__content .btn {
    margin-inline: auto;
    padding: 12px 24px
}

@media (max-width: 575.9px) {
    .modal__content {
        height: 100%;
        width: 100%;
        max-height: 100%;
        max-width: 100%;
        padding: 8px 12px 12px;
        row-gap: 12px;
        margin: 0;
        border-radius: 0
    }

    .modal__content .btn {
        width: 100%
    }
}

.modal__body {
    position: relative;
    aspect-ratio: 16/9;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    overflow-y: auto
}

@supports not selector(::-webkit-scrollbar) {
    .modal__body {
        scrollbar-width: thin;
        scrollbar-color: var(--primary-opacity-012, rgba(208, 188, 255, 0.12)) rgba(0, 0, 0, 0)
    }
}

.modal__body::-webkit-scrollbar {
    width: 4px
}

.modal__body::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: var(--primary-opacity-012, rgba(208, 188, 255, 0.12));
    border-radius: 9px;
    border: 4px solid rgba(0, 0, 0, 0)
}

.modal__body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 9px
}

@media (max-width: 575.9px) {
    .modal__body {
        aspect-ratio: unset
    }
}

.modal__body:before {
    content: "Loading...";
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    color: #fff;
    animation: loading 1s linear infinite alternate;
    z-index: 1
}

@keyframes loading {
    to {
        opacity: 0
    }
}

.modal iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: relative;
    z-index: 2;
    display: block
}

.modal__title {
    align-items: center;
    color: var(--text-main, #fff);
    align-self: center;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 2rem
}

@media (max-width: 575.9px) {
    .modal__title {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.modal__close {
    background: rgba(0, 0, 0, 0);
    border: 0;
    transition-property: opacity;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (any-hover: hover) {
    .modal__close:hover {
        opacity: .6
    }
}

.modal__close:active {
    opacity: .6
}

@media (any-hover: hover) {
    .modal__close:focus {
        opacity: .6
    }
}

.modal__close::after {
    content: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.125 13.46a1 1 0 0 1 1.414 1.414l-5.126 5.125 5.126 5.126.068.076a1 1 0 0 1-1.406 1.406l-.076-.068-5.126-5.126-5.125 5.126-.076.068a1 1 0 0 1-1.406-1.406l.068-.076 5.125-5.126-5.125-5.125a1 1 0 1 1 1.414-1.414l5.125 5.125z" fill="%23fff"/></svg>');
    width: 40px;
    height: 40px;
    display: block
}

.content-img {
    display: grid;
    grid-template-columns:1fr fit-content(50%);
    column-gap: 24px
}

.content-img .btn:not(:first-child) {
    margin-top: 20px
}

@media (max-width: 767.9px) {
    .content-img {
        display: block
    }

    .content-img > img {
        width: 100%
    }

    .content-img > img:not(:first-child) {
        margin-top: 24px
    }
}

@media (max-width: 575.9px) {
    .content-img .btn {
        width: 100%
    }

    .content-img .btn:not(:first-child) {
        margin-top: 16px
    }
}

@media (max-width: 767.9px) {
    .content-img__content {
        display: contents
    }
}

.toc-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 32px
}

.toc-section.active .toc-section__arrow::after {
    transform: rotate(-180deg)
}

.toc-section.active .toc-section__list::after {
    display: none
}

.toc-section.all-visible .toc-section__list::after {
    display: none
}

.toc-section.all-visible .toc-section__arrow {
    display: none
}

.toc-section__title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    cursor: pointer;
    margin: 0;
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.5rem;
    letter-spacing: .12px
}

@media (max-width: 575.9px) {
    .toc-section__title {
        font-size: 1.5rem;
        line-height: 2rem;
        letter-spacing: -0.1px
    }
}

.toc-section__title::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--outline-outline, #3a4b59);
    min-width: 100px;
    order: 2
}

@media (any-hover: hover) {
    .toc-section__title:hover .toc-section__arrow::before {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.toc-section__title:active .toc-section__arrow::before {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (any-hover: hover) {
    .toc-section__title:focus .toc-section__arrow::before {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

.toc-section__arrow {
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-radius-medium, 12px);
    background: var(--surface-container-surface-container, #1f2b35);
    order: 5;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.toc-section__arrow::before {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.toc-section__arrow::after {
    content: url('data:image/svg+xml,<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.667 15.419 23.1 13.833 18 18.984l-5.1-5.15-1.566 1.585L18 22.167z" fill="%23fff"/></svg>');
    width: 36px;
    height: 36px;
    display: block;
    transition-property: transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.toc-section__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    position: relative
}

.toc-section__list::after {
    content: "";
    display: block;
    align-self: flex-end;
    width: 36px;
    height: 12px;
    background: url("../images/circle.png")
}

.toc-section__item {
    position: relative;
    display: flex
}

.toc-section__item a {
    width: 100%;
    position: relative;
    padding: 10px 22px;
    overflow: hidden;
    border-radius: var(--border-radius-radius-normal, 16px);
    background: var(--surface-container-surface-container, #1f2b35);
    border: 2px solid var(--surface-container-surface-container, #1f2b35);
    color: var(--on-surface-on-surface, #dce9f3);
    text-align: center;
    transition-property: border-color, color;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0px
}

@media (any-hover: hover) {
    .toc-section__item a:hover {
        border-color: var(--on-surface-on-surface, #dce9f3);
        color: var(--on-surface-on-surface-light, #fff)
    }

    .toc-section__item a:hover::before {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.toc-section__item a:active {
    border-color: var(--on-surface-on-surface, #dce9f3);
    color: var(--on-surface-on-surface-light, #fff)
}

.toc-section__item a:active::before {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (any-hover: hover) {
    .toc-section__item a:focus {
        border-color: var(--on-surface-on-surface, #dce9f3);
        color: var(--on-surface-on-surface-light, #fff)
    }

    .toc-section__item a:focus::before {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

.toc-section__item a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (max-width: 575.9px) {
    .toc-section__item a {
        padding-block: 6px
    }
}

.btn {
    cursor: pointer;
    overflow: hidden;
    padding: 16px 32px;
    border-radius: var(--border-radius-radius-normal, 16px);
    color: var(--primary-on-primary, #fff);
    transition-property: background, box-shadow, color, border-color;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    background: rgba(0, 0, 0, 0);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0px
}

.btn svg {
    min-width: 20px;
    min-height: 20px;
    max-width: 48px;
    max-height: 48px
}

.btn svg path {
    transition-property: fill;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.btn[disabled], .btn.disabled {
    opacity: .6;
    pointer-events: none
}

.btn--primary {
    background: var(--primary-primary, #397dff)
}

@media (any-hover: hover) {
    .btn--primary:hover {
        background: var(--primary-primary-hover, #699eff)
    }
}

.btn--primary:active {
    background: var(--primary-primary-focus, #80b0ff)
}

@media (any-hover: hover) {
    .btn--primary:focus {
        background: var(--primary-primary-focus, #80b0ff)
    }
}

.btn--primary[disabled], .btn--primary.disabled {
    background: var(--primary-primary-disabled, #446089)
}

.btn--secondary {
    background: var(--secondary-secondary, #369aff)
}

@media (any-hover: hover) {
    .btn--secondary:hover {
        background: var(--secondary-secondary-hover, #6fb5ff)
    }
}

.btn--secondary:active {
    background: var(--secondary-secondary-focus, #95c9fc)
}

@media (any-hover: hover) {
    .btn--secondary:focus {
        background: var(--secondary-secondary-focus, #95c9fc)
    }
}

.btn--secondary[disabled], .btn--secondary.disabled {
    background: var(--secondary-secondary-disabled, #5c7896)
}

.btn--tertiary {
    background: var(--tertiary-tertiary, #6f6bff)
}

@media (any-hover: hover) {
    .btn--tertiary:hover {
        background: var(--tertiary-tertiary-hover, #9694ff)
    }
}

.btn--tertiary:active {
    background: var(--tertiary-tertiary-focus, #9ea0fc)
}

@media (any-hover: hover) {
    .btn--tertiary:focus {
        background: var(--tertiary-tertiary-focus, #9ea0fc)
    }
}

.btn--tertiary[disabled], .btn--tertiary.disabled {
    background: var(--tertiary-tertiary-disabled, #5754a0)
}

.btn--outlined {
    border: 1px solid var(--outline-outline-light, #576b7d)
}

@media (any-hover: hover) {
    .btn--outlined:hover {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.btn--outlined:active {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (any-hover: hover) {
    .btn--outlined:focus {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

.btn--outlined[disabled], .btn--outlined.disabled {
    color: var(--surface-container-on-surface-container-disabled, #8a9ba8);
    border: 1px solid var(--outline-outline-light, #576b7d);
    background: rgba(0, 0, 0, 0)
}

.btn--text {
    background: rgba(0, 0, 0, 0)
}

@media (any-hover: hover) {
    .btn--text:hover {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.btn--text:active {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (any-hover: hover) {
    .btn--text:focus {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

.btn--text[disabled], .btn--text.disabled {
    color: var(--surface-container-on-surface-container-disabled, #8a9ba8);
    background: rgba(0, 0, 0, 0)
}

.btn--elevated {
    border: 1px solid var(--on-surface-on-surface, #dce9f3);
    background: var(--surface-container-surface-container, #1f2b35)
}

@media (any-hover: hover) {
    .btn--elevated:hover {
        background: #313c45
    }
}

.btn--elevated:active {
    background: #3a454e
}

@media (any-hover: hover) {
    .btn--elevated:focus {
        background: #3a454e
    }
}

.btn--elevated[disabled], .btn--elevated.disabled {
    color: var(--surface-container-on-surface-container-disabled, #8a9ba8);
    border: 1px solid var(--on-surface-on-surface-dark, #8fa3b5);
    background: var(--surface-container-surface-container-disabled, #1b2a36)
}

.btn--m {
    padding: 12px 24px
}

.btn--s {
    padding: 8px 16px
}

.pros-cons {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px
}

.pros-cons:not(:first-child) {
    margin-top: 32px
}

@media (max-width: 991.9px) {
    .pros-cons {
        flex-direction: column
    }
}

@media (max-width: 575.9px) {
    .pros-cons {
        gap: 16px
    }

    .pros-cons:not(:first-child) {
        margin-top: 24px
    }
}

.pros-cons__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px
}

.pros-cons__item--pros .pros-cons__title {
    color: var(--states-success, #00d27f)
}

.pros-cons__item--pros .pros-cons__list li::before {
    content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.002 5.333v13.334m6.672-6.672H5.34" stroke="%2300D27F" stroke-width="2"/></svg>')
}

.pros-cons__item--cons .pros-cons__title {
    color: var(--states-error, #ff3b4e)
}

.pros-cons__item--cons .pros-cons__list li::before {
    content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.717 7.282 7.289 16.71m9.434 0L7.295 7.282" stroke="%23FF3B4E" stroke-width="2"/></svg>')
}

@media (max-width: 575.9px) {
    .pros-cons__item {
        gap: 16px
    }
}

.pros-cons__title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background: var(--states-hovered, rgba(255, 255, 255, 0.08));
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

@media (max-width: 575.9px) {
    .pros-cons__title {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
}

@media (max-width: 575.9px) {
    .pros-cons__title {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.pros-cons__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px
}

.pros-cons__list li {
    position: relative;
    padding-left: 28px;
    color: var(--on-surface-on-surface-light, #fff);
    font-weight: 600;
    letter-spacing: 0px
}

.pros-cons__list li:not(:last-child) {
    padding-bottom: 16px;
    border-bottom: 1px solid #3a4b59
}

.pros-cons__list li::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px
}

.wp-block-table {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.wp-block-table.scrolling td, .wp-block-table.scrolling th {
    pointer-events: none
}

.wp-block-table::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none
}

.wp-block-table:not(:first-child) {
    margin-top: 32px
}

@media (max-width: 575.9px) {
    .wp-block-table:not(:first-child) {
        margin-top: 24px
    }
}

.wp-block-table table {
    min-width: 700px
}

.wp-block-table table thead tr {
    background: var(--surface-container-surface-container, #1f2b35)
}

.wp-block-table table thead tr td:first-child, .wp-block-table table thead tr th:first-child {
    border-radius: 16px 0 0 16px
}

.wp-block-table table thead tr td:last-child, .wp-block-table table thead tr th:last-child {
    border-radius: 0 16px 16px 0
}

.wp-block-table table thead tr th {
    padding-block: 20px;
    padding-inline: 16px;
    text-align: left;
    font-weight: 700;
    color: var(--on-surface-on-surface-dark, #8fa3b5)
}

.wp-block-table table thead tr th:first-child {
    padding-left: 16px
}

.wp-block-table table thead tr th:last-child {
    padding-right: 16px
}

.wp-block-table table thead tr th:not(:first-child) {
    padding-left: 16px
}

.wp-block-table table thead tr th:not(:last-child) {
    padding-right: 16px
}

.wp-block-table table td {
    color: var(--on-surface-on-surface-light, #fff)
}

.wp-block-table table td.bold {
    font-weight: 700
}

@media (max-width: 575.9px) {
    .wp-block-table table thead tr th {
        padding-block: 16px;
        padding-inline: 16px
    }

    .wp-block-table table thead tr th:first-child {
        padding-left: 16px
    }

    .wp-block-table table thead tr th:last-child {
        padding-right: 16px
    }

    .wp-block-table table thead tr th:not(:first-child) {
        padding-left: 8px
    }

    .wp-block-table table thead tr th:not(:last-child) {
        padding-right: 8px
    }
}

.wp-block-table:not(.table--v) tr {
    position: relative
}

.wp-block-table:not(.table--v) tr:not(:last-child) td:first-child::after {
    content: "";
    width: calc(100% - 32px);
    height: 1px;
    left: 16px;
    top: 100%;
    background: #3a4b59;
    position: absolute
}

.wp-block-table:not(.table--v) tr:first-child td {
    padding-top: 24px
}

.wp-block-table:not(.table--v) tr:last-child td {
    padding-bottom: 0
}

.wp-block-table:not(.table--v) td {
    padding-block: 16px;
    padding-inline: 16px
}

.wp-block-table:not(.table--v) td:first-child {
    padding-left: 16px
}

.wp-block-table:not(.table--v) td:last-child {
    padding-right: 16px
}

.wp-block-table:not(.table--v) td:not(:first-child) {
    padding-left: 16px
}

.wp-block-table:not(.table--v) td:not(:last-child) {
    padding-right: 16px
}

@media (max-width: 575.9px) {
    .wp-block-table:not(.table--v) tr:first-child td {
        padding-top: 16px
    }

    .wp-block-table:not(.table--v) td {
        padding-block: 16px;
        padding-inline: 16px
    }

    .wp-block-table:not(.table--v) td:first-child {
        padding-left: 16px
    }

    .wp-block-table:not(.table--v) td:last-child {
        padding-right: 16px
    }

    .wp-block-table:not(.table--v) td:not(:first-child) {
        padding-left: 8px
    }

    .wp-block-table:not(.table--v) td:not(:last-child) {
        padding-right: 8px
    }
}

.wp-block-table.table--v table tr:first-child td {
    border-radius: 16px 16px 0 0
}

.wp-block-table.table--v table tr:last-child td {
    border-radius: 0 0 16px 16px
}

.wp-block-table.table--v table td {
    padding: 16px;
    position: relative
}

.wp-block-table.table--v table td:first-child {
    background: var(--surface-container-surface-container, #1f2b35);
    padding: 16px;
    color: var(--on-surface-on-surface-light, #fff);
    font-weight: 700
}

.wp-block-table.table--v table td:nth-of-type(2) {
    padding-left: 24px
}

.wp-block-table.table--v table td:last-child {
    padding-right: 0
}

.wp-block-table.table--v table td:not(:first-child)::after {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    top: 100%;
    left: 0;
    background: #3a4b59
}

.wp-block-table.table--v table td:not(:first-child):nth-of-type(2)::after {
    left: 24px
}

@media (max-width: 575.9px) {
    .wp-block-table.table--v table td {
        padding: 8px
    }

    .wp-block-table.table--v table td:first-child {
        padding: 8px 16px
    }

    .wp-block-table.table--v table td:nth-of-type(2) {
        padding-left: 16px
    }

    .wp-block-table.table--v table td:not(:first-child):nth-of-type(2)::after {
        left: 16px
    }

    .wp-block-table.table--v table tr:first-child td {
        padding-top: 16px
    }

    .wp-block-table.table--v table tr:last-child td {
        padding-bottom: 16px
    }
}

.breadcrumbs {
    width: 100%;
    margin: 0 auto;
    max-width: var(--width-container);
    padding-block: 4px
}

.breadcrumbs__list {
    width: max-content;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 8px
}

.breadcrumbs li {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.breadcrumbs li:not(:last-child) {
    padding-right: 28px
}

.breadcrumbs li:not(:last-child)::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="m12.646 10.354-4.792 4.792A.5.5 0 0 1 7 14.793v-2.586a.5.5 0 0 1 .146-.353l1.5-1.5a.5.5 0 0 0 0-.708l-1.5-1.5A.5.5 0 0 1 7 7.793V5.207a.5.5 0 0 1 .854-.353l4.792 4.792a.5.5 0 0 1 0 .708" fill="%2381EFA6"/></svg>');
    display: block;
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translate(0, -50%);
    width: 20px;
    height: 20px
}

.breadcrumbs li:last-child a, .breadcrumbs li:last-child span {
    color: var(--Text, #d9d9d9)
}

.breadcrumbs a, .breadcrumbs span {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-block: 4px;
    color: var(--Icons, #fff);
    transition-property: color;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    will-change: color
}

.breadcrumbs a:focus {
    color: var(--Text, #d9d9d9)
}

.winners-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px
}

.winners-list:not(:first-child) {
    margin-top: 32px
}

@media (max-width: 575.9px) {
    .winners-list:not(:first-child) {
        margin-top: 24px
    }
}

.winners-list__title {
    width: min-content;
    margin: 0;
    min-width: 76px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0px;
	color: #fff;
}

.winners-list__wrap {
    overflow: hidden;
    white-space: nowrap
}

@media (max-width: 575.9px) {
    .winners-list__wrap {
        margin-right: calc(var(--offsets, 20px) * -1)
    }
}

.winners-list__list {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.winners-list__list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none
}

.winners-list__item {
    max-width: 100%;
    min-width: 192px;
    display: grid;
    grid-template-columns:48px auto 1fr;
    column-gap: 12px;
    row-gap: 1px
}

.winners-list__item:not(:last-child) {
    margin-right: 16px
}

.winners-list__item img, .winners-list__item svg {
    width: 48px;
    height: 48px;
    min-width: 48px;
    object-fit: cover;
    grid-column: 1/2;
    grid-row: 1/3
}

.winners-list__game {
    grid-column: 2/-1;
    color: var(--on-surface-on-surface-light, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0px
}

.winners-list__name {
    color: var(--on-surface-on-surface, #dce9f3);
    min-width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    align-self: center;
    font-size: 0.875rem;
    line-height: 1.375rem
}

@media (max-width: 575.9px) {
    .winners-list__name {
        font-size: 0.75rem
    }
}

.winners-list__sum {
    color: var(--primary-primary, #397dff);
    max-width: 100%;
    margin-left: -4px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0px
}

.gallery {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 16px
}

.gallery:not(:first-child) {
    margin-top: 32px
}

@media (max-width: 1600px) {
    .gallery {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 1200px) {
    .gallery {
        grid-template-columns:repeat(4, 1fr)
    }
}

@media (max-width: 991.9px) {
    .gallery {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 575.9px) {
    .gallery {
        grid-template-columns:1fr
    }
}

@media (max-width: 575.9px) {
    .gallery:not(:first-child) {
        margin-top: 24px
    }
}

.gallery__item {
    position: relative;
    height: 200px;
    padding: 16px;
    border-radius: 16px;
    background: var(--surface-container-surface-container, #1f2b35);
    overflow: hidden
}

.gallery__item--video .gallery__item-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6980392157);
    z-index: 1
}

@media (any-hover: hover) {
    .gallery__item--video:hover .gallery__item-link .gallery__item-btn:after {
        background: rgba(220, 233, 243, .12)
    }
}

.gallery__item--video:active .gallery__item-link .gallery__item-btn:after {
    background: rgba(143, 163, 181, .3)
}

@media (any-hover: hover) {
    .gallery__item--video:focus .gallery__item-link .gallery__item-btn:after {
        background: rgba(143, 163, 181, .3)
    }
}

.gallery__item-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    padding: 12px;
    overflow: hidden
}

.gallery__item-link video, .gallery__item-link img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.gallery__item-title, .gallery__item-btn {
    position: relative;
    z-index: 2
}

.gallery__item-title {
    color: var(--on-surface-on-surface, #dce9f3);
    text-align: center
}

.gallery__item-btn {
    width: 76px;
    height: 38px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50px;
    overflow: hidden
}

.gallery__item-btn::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="76" height="38" viewBox="0 0 76 38" fill="none"><rect x="1" y="1" width="74" height="36" rx="18" fill="%23fff" fill-opacity=".08" stroke="%23fff" stroke-width="2"/><path d="M34.088 14.032a.27.27 0 0 1 .259.003l8.571 4.852c.043.024.06.047.068.061a.1.1 0 0 1 0 .104.2.2 0 0 1-.068.061l-8.571 4.852a.27.27 0 0 1-.26.003.2.2 0 0 1-.072-.064.1.1 0 0 1-.015-.052v-9.704l.004-.03.01-.022a.2.2 0 0 1 .074-.064Z" stroke="%23fff" stroke-width="2"/></svg>');
    width: 76px;
    height: 38px;
    display: block
}

.gallery__item-btn::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 10;
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.listing:not(:first-child) {
    margin-top: 32px
}

@media (max-width: 575.9px) {
    .listing:not(:first-child) {
        margin-top: 24px
    }
}

.listing__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px
}

.listing__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    border-radius: 16px;
    background: var(--surface-container-surface-container, #1f2b35);
    padding: 16px;
    width: 100%
}

.listing__item-block {
    position: relative;
    flex: 1
}

@media (max-width: 1800px)and (min-width: 1200.1px) {
    .listing__item {
        flex-wrap: wrap;
        display: grid;
        grid-template-columns:1fr 1fr
    }
}

@media (min-width: 992px) {
    .listing__item .listing__info {
        flex: 2;
        max-width: 329px
    }

    .listing__item .listing__bonus {
        flex: 1.1
    }

    .listing__item .listing__adv {
        flex: unset
    }

    .listing__item .listing__btn {
        flex: 1;
        max-width: 100%;
        width: 100%
    }
}

@media (max-width: 991.9px) {
    .listing__item {
        flex-wrap: wrap;
        display: grid;
        grid-template-columns:1fr 1fr
    }
}

@media (max-width: 767.9px) {
    .listing__item {
        display: flex;
        flex-direction: column;
        align-items: stretch
    }
}

@media (max-width: 575.9px) {
    .listing__item {
        gap: 16px
    }
}

.listing__img {
    position: relative;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start
}

.listing__place {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-container-surface-container-disabled, #1b2a36);
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .listing__place {
        font-size: 1rem;
        width: 22px;
        height: 22px;
        top: 4px;
        left: 4px
    }
}

.listing__info {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px
}

.listing__info img, .listing__info svg {
    width: 120px;
    min-width: 120px;
    height: 98px;
    object-fit: contain;
    border-radius: 16px
}

@media (max-width: 575.9px) {
    .listing__info {
        gap: 8px
    }

    .listing__info img, .listing__info svg {
        width: 100px;
        min-width: 100px;
        height: 64px
    }
}

.listing__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0px
}

@media (max-width: 575.9px) {
    .listing__title {
        gap: 8px;
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.listing__rate {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    --percent: calc(var(--rating, 4.5) / 5 * 100%)
}

.listing__rate::before, .listing__rate::after {
    font-size: 24px;
    line-height: 22px;
    height: 24px;
    font-weight: 400;
    letter-spacing: 0px
}

.listing__rate::before {
    content: "★★★★★";
    display: block;
    background: linear-gradient(90deg, var(--star-color) var(--percent), var(--star-bg) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.listing__rate::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "☆☆☆☆☆";
    display: block;
    letter-spacing: 0px;
    color: var(--star-color)
}

.listing__bonus {
    color: var(--on-surface-on-surface-light, #fff);
    text-align: center;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 2rem
}

@media (max-width: 575.9px) {
    .listing__bonus {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.listing__advantages {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px
}

@media (max-width: 575.9px) {
    .listing__advantages {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap
    }
}

.listing__advantages-item {
    position: relative;
    padding-left: 30px;
    color: var(--on-surface-on-surface-dark, #8fa3b5);
    font-size: 0.875rem;
    line-height: 1.375rem
}

.listing__advantages-item::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="m3.666 10.83 6.902 6.587 7.765-12.834" stroke="%2300D27F" stroke-width="2"/></svg>');
    display: block;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 0;
    left: 0
}

.listing__btn {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px
}

.listing__btn .btn {
    width: 100%
}

@media (max-width: 575.9px) {
    .listing__btn {
        gap: 12px
    }
}

.listing__payments {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap
}

.listing__payments-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 32px
}

.listing__payments-item img, .listing__payments-item svg {
    max-width: 56px;
    max-height: 32px;
    object-fit: contain
}

.author-block {
    display: grid;
    grid-template-columns:124px 1fr auto auto
}

.author-block:not(:first-child) {
    margin-top: 32px
}

@media (min-width: 768px) {
    .author-block > * {
        grid-column: 2/-1
    }

    .author-block img {
        grid-column: 1/2;
        grid-row: 1/50
    }

    .author-block__name {
        grid-column: 2/3
    }

    .author-block__role {
        grid-column: 3/4
    }

    .author-block__rate {
        grid-column: 4/5
    }
}

@media (max-width: 767.9px) {
    .author-block {
        grid-template-columns:64px auto 1fr;
        grid-template-rows:1fr auto
    }

    .author-block > * {
        grid-column: 1/-1
    }

    .author-block img {
        grid-column: 1/2;
        grid-row: 1/3
    }

    .author-block__name {
        grid-column: 2/-1;
        grid-row: 1/2
    }

    .author-block__role {
        grid-column: 2/3;
        grid-row: 2/3
    }

    .author-block__rate {
        grid-column: 3/-1;
        grid-row: 2/3
    }
}

@media (max-width: 575.9px) {
    .author-block:not(:first-child) {
        margin-top: 24px
    }
}

.author-block img {
    border-radius: 16px;
    width: 100px;
    height: 100px;
    min-width: 100px;
    margin-right: 24px;
    object-fit: cover
}

@media (max-width: 767.9px) {
    .author-block img {
        width: 56px;
        height: 56px;
        min-width: 56px;
        margin-right: 8px
    }
}

.author-block__name {
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 2rem
}

@media (max-width: 575.9px) {
    .author-block__name {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.author-block__role {
    color: var(--on-surface-on-surface-light, #fff);
    align-self: center;
    margin-left: 16px
}

@media (max-width: 767.9px) {
    .author-block__role {
        margin-left: 0;
        align-self: flex-start
    }
}

.author-block__rate {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    --percent: calc(var(--rating, 4.5) / 5 * 100%)
}

.author-block__rate::before, .author-block__rate::after {
    font-size: 24px;
    line-height: 22px;
    height: 24px;
    font-weight: 400;
    letter-spacing: 0px
}

.author-block__rate::before {
    content: "★★★★★";
    display: block;
    background: linear-gradient(90deg, var(--star-color) var(--percent), var(--star-bg) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.author-block__rate::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "☆☆☆☆☆";
    display: block;
    letter-spacing: 0px;
    color: var(--star-color)
}

@media (max-width: 575.9px) {
    .author-block__rate::before, .author-block__rate::after {
        font-size: 18px;
        line-height: 16px;
        height: 18px;
        letter-spacing: 0px
    }
}

.author-block__rate {
    color: var(--on-surface-on-surface, #dce9f3);
    margin-left: 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0px
}

@media (max-width: 767.9px) {
    .author-block__rate {
        align-self: flex-start
    }
}

.author-block__text {
    margin-top: 16px
}

.how-to {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 48px;
    counter-reset: how-to-list
}

.how-to:not(:first-child) {
    margin-top: 32px
}

@media (max-width: 575.9px) {
    .how-to {
        gap: 32px
    }

    .how-to:not(:first-child) {
        margin-top: 24px
    }
}

.how-to__item {
    counter-increment: how-to-list;
    display: grid;
    grid-template-columns:1fr 1fr;
    column-gap: 24px
}

.how-to__item img {
    width: 100%
}

@media (max-width: 575.9px) {
    .how-to__item {
        grid-template-columns:1fr;
        row-gap: 16px
    }
}

.how-to__item-title {
    grid-column: 1/-1;
    text-align: center;
    color: var(--On-Surface, #fff);
    padding: 24px 16px;
    border-radius: var(--Padding-padding-horizontal-small, 16px);
    background: var(--states-hovered, rgba(255, 255, 255, 0.08));
    margin-bottom: 32px;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 2rem
}

@media (max-width: 575.9px) {
    .how-to__item-title {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.how-to__item-title::before {
    content: counter(how-to-list) ". "
}

@media (max-width: 575.9px) {
    .how-to__item-title {
        padding: 16px;
        margin-bottom: 0
    }
}

.how-to__item .btn:not(:first-child) {
    margin-top: 20px
}

@media (max-width: 575.9px) {
    .how-to__item .btn {
        width: 100%
    }
}

.popular-slots {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 16px
}

.popular-slots:not(:first-child) {
    margin-top: 32px
}

@media (max-width: 1600px) {
    .popular-slots {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 1200px) {
    .popular-slots {
        grid-template-columns:repeat(4, 1fr)
    }
}

@media (max-width: 991.9px) {
    .popular-slots {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 575.9px) {
    .popular-slots {
        grid-template-columns:1fr
    }
}

@media (max-width: 575.9px) {
    .popular-slots:not(:first-child) {
        margin-top: 24px
    }
}

.popular-slots__item {
    position: relative;
    min-height: 200px;
    padding: 16px;
    border-radius: 16px;
    background: var(--surface-container-surface-container, #1f2b35);
    overflow: hidden
}

.popular-slots__item img {
    position: absolute;
    top: 16px;
    left: 16px;
    border-radius: 12px;
    object-fit: cover;
    width: calc(100% - 32px);
    height: calc(100% - 32px)
}

.popular-slots__item:hover .popular-slots__btns {
    transform: translateX(0)
}

.popular-slots__btns {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, .6980392157);
    border-radius: 12px;
    padding: 16px;
    transition-property: transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    transform: translateX(calc(-100% - 16px))
}

.faq {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px
}

.faq:not(:first-child) {
    margin-top: 32px
}

@media (max-width: 575.9px) {
    .faq {
        gap: 8px
    }

    .faq:not(:first-child) {
        margin-top: 24px
    }
}

.faq__item {
    position: relative
}

.faq__item-details[open] summary::after {
    transform: rotate(-180deg)
}

.faq summary {
    border-radius: 16px;
    background: var(--states-hovered, rgba(255, 255, 255, 0.08));
    padding: 16px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: var(--on-surface-on-surface-light, #fff);
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0px
}

.faq summary::marker {
    content: ""
}

.faq summary::-webkit-details-marker {
    display: none
}

.faq summary::after {
    content: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m26.668 17.419-1.567-1.586-5.1 5.151-5.1-5.15-1.566 1.585L20 24.167z" fill="%23fff"/></svg>');
    width: 40px;
    height: 40px;
    transition-property: transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (max-width: 575.9px) {
    .faq summary {
        padding: 12px 20px 12px 16px;
        gap: 16px
    }
}

.faq p:not([class]) {
    margin-block: 16px
}

.aside-block {
    width: 320px;
    margin-top: 24px;
    display: grid;
    grid-template-columns:1fr;
    gap: 16px;
    align-self: flex-start
}

.aside-block > *:not(:first-child):nth-of-type(n) {
    margin-top: 0
}

@media (max-width: 1600px) {
    .aside-block {
        width: 260px
    }
}

@media (max-width: 1200px) {
    .aside-block {
        width: 100%;
        max-width: calc(var(--width-container) + var(--offsets, 20px) * 2);
        padding-inline: var(--offsets, 20px);
        margin: var(--wrapper-margin) auto 0;
        grid-template-columns:1fr 1fr
    }

    .aside-block .bonus-banner {
        grid-column: 1/-1
    }
}

@media (max-width: 767.9px) {
    .aside-block {
        grid-template-columns:1fr
    }
}

.bonus-banner {
    padding: 24px;
    border-radius: 16px;
    background: #0e1531;
    background-position: center;
    background-size: cover;
    background-position: center right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px
}

.bonus-banner:not(:first-child) {
    margin-top: 32px
}

@media (max-width: 1200px) {
    .bonus-banner {
        align-items: center
    }
}

@media (max-width: 991.9px) {
    .bonus-banner {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap
    }
}

@media (max-width: 575.9px) {
    .bonus-banner {
        padding: 12px 16px
    }

    .bonus-banner:not(:first-child) {
        margin-top: 24px
    }
}

.bonus-banner__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 2rem
}

@media (max-width: 575.9px) {
    .bonus-banner__text {
        gap: 2px;
        font-size: 0.75rem;
        line-height: 1.375rem
    }
}

.bonus-banner__text span {
    color: var(--secondary-secondary, #369aff);
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .bonus-banner__text span {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.bonus-banner .btn {
    width: 100%
}

@media (max-width: 1200px) {
    .bonus-banner .btn {
        max-width: 50%;
        margin-inline: auto
    }
}

@media (max-width: 991.9px) {
    .bonus-banner .btn {
        width: auto;
        max-width: 100%;
        margin-inline: unset
    }
}

.casino-card {
    border-radius: 16px;
    padding: 12px 12px 20px;
    background: var(--surface-container-surface-container, #1f2b35);
    color: var(--on-surface-on-surface-light, #fff);
    display: grid;
    grid-template-columns:1fr;
    row-gap: 16px
}

.casino-card:not(:first-child) {
    margin-top: 32px
}

@media (max-width: 767.9px) {
    .casino-card {
        row-gap: 12px;
        grid-template-columns:120px 1fr;
        column-gap: 16px
    }

    .casino-card > * {
        grid-column: 1/-1
    }

    .casino-card img {
        grid-column: 1/2
    }

    .casino-card__title {
        grid-column: 2/-1
    }
}

@media (max-width: 575.9px) {
    .casino-card:not(:first-child) {
        margin-top: 24px
    }
}

.casino-card img {
    max-height: 174px;
    width: 100%;
    border-radius: 12px;
    object-fit: cover
}

.casino-card__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

@media (max-width: 575.9px) {
    .casino-card__title {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
}

@media (max-width: 767.9px) {
    .casino-card__title {
        align-items: flex-start
    }
}

.casino-card__rate {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    --percent: calc(var(--rating, 4.5) / 5 * 100%)
}

.casino-card__rate::before, .casino-card__rate::after {
    font-size: 24px;
    line-height: 22px;
    height: 24px;
    font-weight: 400;
    letter-spacing: 0px
}

.casino-card__rate::before {
    content: "★★★★★";
    display: block;
    background: linear-gradient(90deg, var(--star-color) var(--percent), var(--star-bg) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.casino-card__rate::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "☆☆☆☆☆";
    display: block;
    letter-spacing: 0px;
    color: var(--star-color)
}

@media (max-width: 575.9px) {
    .casino-card__rate::before, .casino-card__rate::after {
        font-size: 18px;
        line-height: 16px;
        height: 18px;
        letter-spacing: 0px
    }
}

.casino-card__rate {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 2rem
}

@media (max-width: 575.9px) {
    .casino-card__rate {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.casino-card__bonus {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0px
}

.casino-card__bonus-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--on-surface-on-surface, #dce9f3)
}

.casino-card__bonus-title::before {
    content: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.788 5.4c0 .29.04.595.142.892.101.295.29.65.63.936.24.202.518.336.813.404a144 144 0 0 0-2.48 1.494l1.578 2.551A162 162 0 0 1 10.466 9.3v11.102H5.5a1 1 0 0 1-1-1v-9h-1a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1zm7.752 3.337V20.4h-2.074V8.727l1.013-.574zM21.5 5.4a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v9a1 1 0 0 1-1 1h-4.96V9.289l4.408 2.427 1.447-2.628c-.72-.395-1.628-.896-2.616-1.44.501-.086 1.037-.331 1.397-.886.31-.477.35-.98.318-1.36z" fill="%23DCE9F3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.85 3.414a1.04 1.04 0 0 1 .666.102l.57.3c.658.351 1.757.95 3.036 1.647h.768a54 54 0 0 1 2.79-1.486c.393-.19.739-.341 1.007-.433.131-.045.266-.083.39-.1a1 1 0 0 1 .23 0 .6.6 0 0 1 .248.091l.091.075.118.128c.278.326.566.834.664 1.311.056.27.07.633-.13.943-.222.341-.601.471-1.005.471h-3.341c2.004 1.097 4.132 2.264 5.582 3.062l-.483.876c-1.69-.93-4.276-2.35-6.523-3.578a223 223 0 0 0-5.973 3.565l-.263-.425-.262-.426c1.021-.632 2.35-1.44 3.73-2.258l1.387-.816H7.792a.96.96 0 0 1-.628-.223 1.1 1.1 0 0 1-.329-.497c-.117-.339-.106-.735-.03-1.076.074-.338.233-.709.501-.965.139-.132.32-.245.543-.288m.148 1.012c-.076.072-.167.234-.217.458-.05.222-.04.42 0 .533q.013.033.022.046h2.229c-.57-.309-1.05-.57-1.402-.758L8.07 4.41c-.039-.019-.045-.01-.032-.013a.2.2 0 0 0-.04.03m9.012.065a9 9 0 0 0-.895.386c-.336.162-.721.361-1.145.586h2.323a.5.5 0 0 0 .166-.022.5.5 0 0 0-.01-.19c-.053-.257-.219-.566-.38-.78z" fill="%23DCE9F3"/></svg>');
    width: 24px;
    height: 24px
}

@media (max-width: 767.9px) {
    .casino-card__bonus {
        align-items: flex-start;
        gap: 4px
    }
}

.casino-card .btn {
    width: 100%
}

@media (max-width: 575.9px) {
    .casino-card .btn {
        padding: 11px
    }
}