.header-wrapper {
    width: 100%;
    border-bottom-left-radius: var(--header-wrapper-br);
    border-bottom-right-radius: var(--header-wrapper-br);
    overflow: hidden;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.header {
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    gap: 18px;
    overflow: hidden;
    max-width: var(--content-max-width);
    padding: var(--header-pt) var(--header-pr) var(--header-pb) var(--header-pl);
}

.header__logo {
    position: relative;
    z-index: 1;
    display: block;
    flex: none;
    width: var(--header-logo-w);
    height: auto;
    aspect-ratio: 533 / 105;
}

.header__title {
    position: relative;
    z-index: 1;
    font-weight: 400;
    font-size: var(--header-title-fs);
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
}

.header__title-accent {
    color: #ffbc00;
    font-weight: 700;
    display: block;
}

.header__roulette {
    position: absolute;
    aspect-ratio: 1186 / 443;
    width: var(--header-roulette-width);
    background-size: cover;
    background-position: center bottom;
}

.header__ball {
    position: absolute;
    aspect-ratio: 445 / 443;
    width: var(--header-ball-width);
    background-size: cover;
    background-position: center center;
}

@media (min-width: 0px) {
    :root {
        --content-max-width: 2354px;
        --header-title-fs: clamp(12px, 4.35vw, 64px);
        --header-gap: 29px;
        --header-pl: 16px;
        --header-pt: 36px;
        --header-pb: 112px;
        --header-pr: 16px;
        --header-wrapper-br: clamp(26px, 1.33vw, 34px);
        --header-logo-w: clamp(80px, 42.85vw, 533px);
        --header-ball-width: clamp(135px, 17.38vw, 445px);
        --header-roulette-width: clamp(350px, 46.35vw, 1186px);
    }

    .header-wrapper {
        background-image: image-set(
                url("../img/header/header_bg_mobile@1x.webp") 1x,
                url("../img/header/header_bg_mobile@2x.webp") 2x
        );
    }

    .header__roulette {
        bottom: -6%;
        right: -5%;
        background-image: image-set(
                url("../img/header/roulette_mobile@1x.webp") 1x,
                url("../img/header/roulette_mobile@2x.webp") 2x
        );
    }

    .header__ball {
        top: 0;
        left: 95%;
        transform: translateX(-50%);
        background-image: image-set(
                url("../img/header/ball_mobile@1x.webp") 1x,
                url("../img/header/ball_mobile@2x.webp") 2x
        );
    }
}

@media (min-width: 600px) {
    :root {
        --content-max-width: 2354px;
        --header-title-fs: clamp(16px, 2.5vw, 64px);
        --header-gap: 22px;
        --header-pl: clamp(4px, 4.42vw, 40px);
        --header-pt: 32px;
        --header-pb: 48px;
        --header-pr: 0;
        --header-wrapper-br: clamp(26px, 1.33vw, 34px);
        --header-logo-w: clamp(160px, 20.85vw, 533px);
        --header-ball-width: clamp(135px, 17.38vw, 445px);
        --header-roulette-width: clamp(400px, 46.35vw, 1186px);
    }

    .header-wrapper {
        background-image: image-set(
                url("../img/header/header_bg_tablet@1x.webp") 1x,
                url("../img/header/header_bg_tablet@2x.webp") 2x
        );
    }

    .header__roulette {
        bottom: 0;
        right: -15%;
        background-image: image-set(
                url("../img/header/roulette_tablet@1x.webp") 1x,
                url("../img/header/roulette_tablet@2x.webp") 2x
        );
    }

    .header__ball {
        top: -30%;
        left: 60%;
        transform: translateX(-50%);
        background-image: image-set(
                url("../img/header/ball_tablet@1x.webp") 1x,
                url("../img/header/ball_tablet@2x.webp") 2x
        );
    }
}

@media (min-width: 1024px) {
    :root {
        /*--content-max-width: clamp(16px, 91.96vw, 2354px);*/
        /*--header-title-fs: clamp(16px, 2.5vw, 64px);*/
        /*--header-gap: clamp(6px, 1.33vw, 34px);*/
        /*--header-pl: clamp(16px, 4.42vw, 113px);*/
        /*--header-pt: clamp(16px, 2.93vw, 75px);*/
        /*--header-pb: clamp(16px, 3.52vw, 90px);*/
        /*--header-pr: 0;*/
        /*--header-wrapper-br: clamp(6px, 1.33vw, 34px);*/
        /*--header-logo-w: clamp(40px, 20.85vw, 533px);*/
        /*--header-ball-width: clamp(16px, 17.38vw, 445px);*/
        /*--header-roulette-width: clamp(16px, 46.35vw, 1186px);*/
        --header-title-fs: clamp(28px, 2.5vw, 64px);
        --header-gap: 34px;
        --header-pl: clamp(40px, 4.42vw, 113px);
        --header-pt: 75px;
        --header-pb: 90px;
        --header-pr: 0;
        --header-wrapper-br: clamp(26px, 1.33vw, 34px);
        --header-logo-w: clamp(300px, 20.85vw, 533px);
        --header-ball-width: clamp(220px, 17.38vw, 445px);
        --header-roulette-width: clamp(600px, 46.35vw, 1186px);
    }

    .header-wrapper {
        background-image: image-set(
                url("../img/header/header_bg_desktop@1x.webp") 1x,
                url("../img/header/header_bg_desktop@2x.webp") 2x
        );
    }

    .header__roulette {
        bottom: 0;
        right: 0;
        background-image: image-set(
                url("../img/header/roulette_desktop@1x.webp") 1x,
                url("../img/header/roulette_desktop@2x.webp") 2x
        );
    }

    .header__ball {
        top: -40%;
        left: 51%;
        transform: translateX(-50%);
        background-image: image-set(
                url("../img/header/ball_desktop@1x.webp") 1x,
                url("../img/header/ball_desktop@2x.webp") 2x
        );
    }
}