:root {
    --hero-bg-mobile: none;
    --hero-bg-mobile-ratio: unset;
    --hero-bg-desktop: none;
    --hero-bg-desktop-ratio: unset;

    --hero-title-bp-mobile: auto;
    --hero-title-bp-tablet: auto;
    --hero-title-bp-1080p: auto;
    --hero-title-bp-2k: auto;
    --hero-title-bp-4k: auto;

    --hero-mh-iphone-se: none;
    --hero-mh-iphone-15: none;
    --hero-mh-iphone-16-pro: none;
    --hero-mh-iphone-17-pro-max: none;

    --hero-mh-laptop: none;
    --hero-mh-1080p: none;
    --hero-mh-2k: none;
    --hero-mh-4k: none;

    --menubar-height: 78px;
    --hero-mobile-max-height: 800px;
}

.hero-banner {
    position: relative;
    z-index: 1;
}

.hero-banner .subtitle {
    aspect-ratio: 1019/73;
    max-width: 512px;
    width: 80%;
    display: block;
    margin: 0 auto;
}

.hero-banner:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    content: "";
    background: linear-gradient(to bottom,
            rgba(6, 3, 58, 1),
            rgba(6, 3, 58, 0));
    z-index: 2;
    pointer-events: none;
}

.hero-banner:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    content: "";
    background: linear-gradient(to bottom,
            rgba(6, 3, 58, 0),
            rgba(6, 3, 58, 1));
    z-index: 2;
    pointer-events: none;
}

.hero-banner .content,
.hero-banner .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 3;
}

.hero-banner .wrapper {
    height: calc(var(--hero-mh-iphone-se) - var(--menubar-height));
    max-height: var(--hero-mobile-max-height);
}

.hero-banner .content {
    text-align: center;
    height: 100%;
}

.hero-banner .line {
    font-size: calc(var(--fs-mobile) * var(--hero-scale-line-mobile));
    width: var(--hero-width-line-mobile, auto);
    line-height: 1.2em;
    margin: var(--mobile-margin);
}

.hero-banner .line p:last-of-type {
    margin-bottom: 0;
}

.hero-banner .wrapper {
    padding-top: 74px;
    position: relative;
    z-index: 1;
}

.hero-banner .wrapper .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.hero-banner .wrapper .bottom .btn {
    width: var(--btn-mobile-width);
}

.hero-banner .wrapper small {
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2em;
}

.hero-banner .wrapper small sup {
    top: -0.1em;
    font-size: 100%;
}

.hero-banner .value {
    text-shadow: 0 3.063px 2.713px rgba(0, 0, 0, 0.50);
    font-size: calc(30px * var(--hero-scale-bonus-mobile));
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.67px;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center
}

.hero-banner .value .plus {
    margin-right: -10px;
}

.hero-banner .value .green,
.hero-banner .value .yellow {
    margin-left: -10px;
}

.hero-banner {
    position: relative;
    background-image: var(--hero-bg-mobile);
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: var(--hero-bg-mobile-ratio);
    width: 100%;
}

.hero-banner .title {
    aspect-ratio: var(--hero-title-mobile-ratio);
    width: var(--hero-title-bp-mobile);
    margin: var(--hero-title-mobile-align);
    display: block;
    margin-bottom: 17px;
}

.hero-banner picture img {
    width: 100%;
    height: auto;
}

.hero-banner .free-spins {
    aspect-ratio: 346/27;
    width: 75%;
    max-width: 444px;
    margin: 10px auto 0;
    display: block;
}

.hero-banner .brand-logo {
    height: 26px;
    width: auto;
    margin-top: -6px;
}

.hero-banner .char {
    display: flex;
    aspect-ratio: var(--mobile-ratio);
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
}

@media (min-width:390px) {

    .hero-banner .wrapper {
        height: calc(var(--hero-mh-iphone-15) - var(--menubar-height));
    }

    .hero-banner .brand-logo {
        height: 28px;
    }

}

@media (min-width:400px) {
    .hero-banner .value {
        font-size: 34px;
    }

    .hero-banner .wrapper {
        height: calc(var(--hero-mh-iphone-16-pro) - var(--menubar-height));
    }
}

@media (min-width:440px) {
    .hero-banner .wrapper {
        height: calc(var(--hero-mh-iphone-17-pro-max) - var(--menubar-height));
    }

}

@media (min-width:768px) {
    .hero-banner .content {
        text-align: left;
        gap: 30px;
        align-items: flex-start;
        margin-top: 5%;
    }

    .hero-banner {
        background-image: var(--hero-bg-desktop);
        aspect-ratio: var(--hero-bg-desktop-ratio);
        background-position: center;
        background-size: cover;
        height: auto;
    }

    .hero-banner .wrapper {
        /* width: 53%; */
        height: auto;
        gap: 10px;
        margin-left: 5%;
    }

    .hero-banner .title {
        aspect-ratio: var(--hero-title-desktop-ratio);
        width: var(--hero-title-bp-tablet);
        margin: var(--hero-title-tablet-align);
    }

    .hero-banner .char {
        aspect-ratio: var(--desktop-ratio);
    }

    .hero-banner .line {
        font-size: calc(var(--fs-desktop) * var(--hero-scale-line-tablet));
        width: var(--hero-width-line-tablet);
        margin: var(--desktop-margin);
    }

    .hero-banner .free-spins {
        aspect-ratio: 1044/82;
        width: 67%;
    }

    .hero-banner .value {
        justify-content: flex-start;
        font-size: calc(34px * var(--hero-scale-bonus-tablet));
    }

    .hero-banner .wrapper .bottom .btn {
        width: var(--btn-desktop-width);
    }

    .hero-banner.has-char.right-side .wrapper {
        display: flex;
        flex-direction: row-reverse;
        width: 100%;
        margin-left: auto;
    }

    .hero-banner.has-char.right-side .wrapper .content {
        width: 60%;
    }

    .hero-banner.has-char.right-side .wrapper .char {
        width: 40%;
    }

}

@media (min-width:500px) and (min-height:500px) {
    .hero-banner {
        max-height: var(--hero-mh-laptop);
    }
}

@media (min-width:1200px) and (min-height:620px) {
    .hero-banner {
        max-height: var(--hero-mh-laptop);
    }
}

@media (min-width:1600px) {
    .hero-banner {
        max-height: var(--hero-mh-1080p);
    }

    .hero-banner.has-char.right-side .wrapper .content {
        justify-content: center;
    }
}

@media (min-height:1080px) {
    .hero-banner {
        max-height: var(--hero-mh-1080p);
    }
}

@media (min-height:1230px) {
    .hero-banner {
        max-height: var(--hero-mh-2k);
    }
}

@media (min-height:2160px) {
    .hero-banner {
        max-height: var(--hero-mh-4k);
    }
}

@media (min-width:1024px) {
    .hero-banner .title {
        margin: var(--hero-title-desktop-align);
    }

    .hero-banner .brand-logo {
        height: 42px;
    }

}

@media (min-width:1200px) {
    .hero-banner .brand-logo {
        height: 56px;
    }

}

@media (min-width:1366px) {
    .hero-banner .line {
        font-size: calc(var(--fs-desktop) * var(--hero-scale-line-laptop));
        width: var(--hero-width-line-laptop, auto);
    }

    .hero-banner.has-char.right-side .wrapper .content,
    .hero-banner.has-char.right-side .wrapper .char {
        width: 50%;
    }

    .hero-banner {
        display: flex;
        align-items: center;
        background-size: cover;
    }
}

@media (min-width:1920px) {
    .hero-banner .wrapper {
        width: 1400px;
        margin-left: auto;
        margin-right: auto;
        align-items: flex-start;
    }

    .hero-banner .content {
        margin-top: 0;
    }

    .hero-banner .title {
        width: var(--hero-title-bp-1080p);
    }

    .hero-banner .value {
        font-size: calc(34px * var(--hero-scale-bonus-1080p));
    }

    .hero-banner .line {
        font-size: calc(var(--fs-desktop) * var(--hero-scale-line-1080p));
        width: var(--hero-width-line-1080p, auto);
    }
}

@media (min-width:2560px) {
    .hero-banner .title {
        width: var(--hero-title-bp-2k);
    }

    .hero-banner .value {
        font-size: calc(34px * var(--hero-scale-bonus-2k));
    }

    .hero-banner .line {
        font-size: calc(var(--fs-desktop) * var(--hero-scale-line-2k));
        width: var(--hero-width-line-2k, auto);
    }
}

@media (min-width:3840px) {
    .hero-banner .title {
        width: var(--hero-title-bp-4k);
    }

    .hero-banner .value {
        font-size: calc(34px * var(--hero-scale-bonus-4k));
    }

    .hero-banner .line {
        font-size: calc(var(--fs-desktop) * var(--hero-scale-line-4k));
        width: var(--hero-width-line-4k, auto);
    }
}