*, :after, :before {
    box-sizing: inherit;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

html {
    box-sizing: border-box
}

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

p {
    margin: 0
}

picture {
    display: block
}

img {
    display: block;
    border: none
}

img, svg {
    vertical-align: middle
}

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

:focus {
    outline: none
}

:root {
    --promo-code-fs-coeff: 0.135;
    --primary-font: "Roboto", sans-serif;
    --primary-font-variation: "wdth" 100;
    --secondary-font: "Roboto Flex", sans-serif;
    --secondary-font-variation:
            "slnt" 0,
            "wdth" 100,
            "GRAD" 0,
            "XOPQ" 96,
            "XTRA" 468,
            "YOPQ" 79,
            "YTAS" 750,
            "YTDE" -203,
            "YTFI" 738,
            "YTLC" 514,
            "YTUC" 712;
}

button {
    all: unset
}

body {
    font-style: normal;
    display: flex;
    flex-direction: column;
    height: 100svh;
    position: relative;
    background-color: #14043D;
    font-optical-sizing: auto;
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.content {
    position: relative;
    z-index: auto;
    height: 100%;
}

.description {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo {
    position: relative;
    z-index: 6;
    aspect-ratio: 328 / 72;
    width: calc(var(--var-promo-w) * var(--logo-w-coeff));
    margin-bottom: calc(var(--var-promo-w) * var(--logo-mb-coeff));
    height: auto;
    display: block;
}

.title {
    font-family: var(--primary-font), sans-serif;
    font-variation-settings: var(--primary-font-variation);
    font-weight: 900;
    font-style: italic;
    -webkit-filter: drop-shadow(-3px 3px 32px rgba(50, 170, 255, 0.7));
    filter: drop-shadow(-3px 3px 32px rgba(50, 170, 255, 0.7));
    text-align: center;
    text-transform: uppercase;
}

.title--gradient {
    display: inline-block;
    background: linear-gradient(to right, #20A9FE 0%, #BDA7FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.title__1 {
    position: relative;
    z-index: 6;
    font-size: calc(var(--var-promo-w) * var(--title-1-fs-coeff));
    line-height: 1;
}


.title__2 {
    position: relative;
    z-index: 6;
    font-size: calc(var(--var-promo-w) * var(--title-2-fs-coeff));
    line-height: 1.2;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 30%,
        #BDA7FF 45%,
        #20A9FE 50%,
        #BDA7FF 55%,
        #ffffff 70%,
        #ffffff 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-animation: shimmer 4.5s linear infinite;
    animation: shimmer 4.5s linear infinite;
}

.title__3 {
    position: relative;
    z-index: 6;
    font-size: calc(var(--var-promo-w) * var(--title-3-fs-coeff));
    margin-bottom: calc(var(--var-promo-w) * var(--title-3-mb-coeff));
    line-height: 1;
}

.promo__subtitle {
    position: relative;
    z-index: 6;
    font-family: var(--secondary-font), sans-serif;
    font-weight: 600;
    font-variation-settings: var(--secondary-font-variation);
    color: #fff;
    font-size: calc(var(--var-promo-w) * var(--promo-subtitle-fs-coeff));
    margin-bottom: calc(var(--var-promo-w) * var(--promo-subtitle-mb-coeff));
    line-height: 0.78;
    text-align: center;
    -webkit-filter: drop-shadow(-3px 3px 26px #1BA0FF);
    filter: drop-shadow(-3px 3px 26px #1BA0FF);
    text-transform: uppercase;
}

.promo_btn {
    aspect-ratio: 640 / 132;
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--var-promo-w) * var(--var-promo-gap-coeff));
    border-radius: calc(var(--var-promo-w) * var(--var-promo-br-coeff));
    background: transparent;
    box-shadow: inset 0 1px 4px 4px rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    width: var(--var-promo-w);
    margin-bottom: calc(var(--var-promo-w) * var(--var-promo-mb-coeff));
    padding: 0 calc(var(--var-promo-w) * var(--var-promo-p-coeff));
}

.promo_btn:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: calc(var(--var-promo-w) * var(--var-promo-br-coeff));
    background: linear-gradient(-76deg, #D9C1F9 0%, #FFFFFF 43%, #68B9FF 100%);
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
}

.promo_btn > span {
    width: 100%;
    position: relative;
    z-index: 1;
    font-family: var(--primary-font), sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings: var(--primary-font-variation);
    display: inline-block;
    color: #001667;
    font-size: calc(var(--var-promo-w) * var(--promo-code-fs-coeff));
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}

.copy-btn {
    width: calc(var(--var-promo-w) * var(--copy-btn-w-coeff));
    aspect-ratio: 1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    background: image-set(
            url("../img/copy/copy@1x.webp") 1x,
            url("../img/copy/copy@2x.webp") 2x
    ) center/cover no-repeat;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.copy-btn:active {
    transform: scale(0.96);
}

.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: var(--footer-p);
}

.telegram__link {
    display: flex;
    align-items: center;
}

.telegram__icon {
    aspect-ratio: 1;
    width: var(--telegram-w-coeff);
    background: url("../img/telegram.svg") center/cover no-repeat;
    z-index: 2;
}

.telegram__text {
    position: relative;
    right: var(--telegram-r);
    font-family: var(--secondary-font), sans-serif;
    font-variation-settings: var(--secondary-font-variation);
    font-weight: 700;
    color: #fff;
    white-space: pre-line;
    /*text-transform: uppercase;*/
    z-index: 1;
    background: linear-gradient(to right, #D9D9D900 16%, #7B71EC80 57%, #0863FF 100%);
    border-top-right-radius: 11px;
    border-bottom-right-radius: 11px;
    box-shadow: inset -1px -1px 6px -2px #fff;
    font-size: var(--telegram-fs);
    padding: var(--telegram-p);
}

.app-store-link {
    aspect-ratio: 182 / 60;
    display: block;
    width: var(--app-store-link-w);
    height: auto;
    background: url("../img/app_store.svg") center/cover no-repeat;
}

.btn {
    position: relative;
    aspect-ratio: 342 / 98;
    max-width: 530px;
    height: fit-content;
    color: #fff;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--var-promo-w) * var(--btn-w-coeff));
    font-size: calc(var(--var-promo-w) * var(--btn-fs-coeff));
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
    text-transform: uppercase;
    font-weight: 800;
}

.btn > span {
    position: relative;
    z-index: 2;
    font-family: var(--secondary-font), sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings: var(--secondary-font-variation);
    display: inline-block;
    background: linear-gradient(84deg, #060D4E 0%, #0E1EB4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.btn:after,
.btn:before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--var-promo-w) * var(--btn-br-coeff));
    pointer-events: none;
    transition: opacity 0.2s ease;
    -webkit-filter: drop-shadow(0 0 66px rgba(0, 255, 21, 0.28));
    filter: drop-shadow(0 0 66px rgba(0, 255, 21, 0.28));
    box-shadow: inset 2px 2px 4px 2px #fff;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: opacity, filter;
}

.btn:before {
    background: linear-gradient(to right, #1FFF32 0%, #96FEA4 100%);
    opacity: 1;
}

.btn:after {
    background: linear-gradient(to right, #39FF52 0%, #B8FFC3 100%);
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
    .btn:hover::before {
        opacity: 0;
    }

    .btn:hover::after {
        opacity: 1;
    }
}

@supports (-webkit-touch-callout: none) {
    .btn:before,
    .btn:after {
        -webkit-animation: ios-btn-shadow-refresh 0.12s ease-out 1;
        animation: ios-btn-shadow-refresh 0.12s ease-out 1;
    }
}

.btn-pulse {
    -webkit-animation: pulse 1.5s ease-in-out infinite;
    animation: pulse 1.5s ease-in-out infinite;
}

.btn:active {
    -webkit-animation: none;
    animation: none;
    transform: scale(0.98) translateY(1px);
}

.purple-wrapper {

}

.purple {
    position: absolute;
    z-index: 9;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.purple::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 170, 252, 0.67) 13%,
        rgba(223, 95, 255, 0.70) 48%,
        rgba(255, 228, 253, 0.05) 81%,
        rgba(255, 228, 253, 0) 97%
    );
    filter: blur(68px);
    z-index: -1;
}

.purple--mask {
    animation: fadeInOut 4.5s ease-in-out infinite;
    -webkit-animation: fadeInOut 4.5s ease-in-out infinite;
}

.purple--mask::before {
    opacity: 0.4;
    background: radial-gradient(
        circle,
        rgba(95, 239, 255, 0.67) 13%,
        rgba(95, 239, 255, 0.70) 48%,
        rgba(120, 233, 255, 0.05) 81%,
        rgba(255, 228, 253, 0) 97%
    );
}

@-webkit-keyframes pulse-centered {
    0% {
        -webkit-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1);
    }
    50% {
        -webkit-transform: translateX(-50%) scale(1.03);
        transform: translateX(-50%) scale(1.03);
    }
    100% {
        -webkit-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1);
    }
}

@keyframes pulse-centered {
    0% {
        -webkit-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1);
    }
    50% {
        -webkit-transform: translateX(-50%) scale(1.03);
        transform: translateX(-50%) scale(1.03);
    }
    100% {
        -webkit-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1);
    }
}

.player__wrapper {
    position:  relative;
    aspect-ratio: 1158 / 1508;
    will-change: transform;
    pointer-events: none;
    z-index: 6;
}

.player__image {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.notify {
    position: fixed;
    right: 1%;
    top: 1%;
    z-index: 100;
    background: linear-gradient(to right, #1FFF32 0%, #96FEA4 100%);
    padding: clamp(4px, min(1vw, 2svh), 18px);
    border-radius: clamp(4px, min(1vw, 2svh), 12px);
    opacity: 0;
    transform: translateY(-120%);
    pointer-events: none;
    transition: transform 300ms ease, opacity 300ms ease;
    font-size: clamp(12px, min(1vw, 2svh), 18px);
    font-family: var(--primary-font), sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings: var(--primary-font-variation);
}

.notify.show {
    opacity: 1;
    transform: translateY(0);
}

.notify > span {
    display: inline-block;
    background: linear-gradient(84deg, #060D4E 0%, #0E1EB4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.stripes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.stripe--blue-1,
.stripe--blue-2,
.stripe--pink,
.stripe--light-blue-mask,
.stripe--green-mask,
.stripe--white-pink {
    height: 110%;
    top: -2%;
    position: absolute;
}

.stripe--light-blue-mask,
.stripe--green-mask {
    animation: fadeInOut 5s ease-in-out 0.5s infinite;
    -webkit-animation: fadeInOut 5s ease-in-out 0.5s infinite;
}

.stripe--white-pink {
    animation: fadeInOut 4.5s ease-in-out infinite;
    -webkit-animation: fadeInOut 4.5s ease-in-out infinite;
}

@media (hover: hover) and (pointer: fine) {
    .social > a:hover {
        transform: scale(1.06);
    }
}

@media (orientation: portrait) and (min-width: 0px) {
    :root {
        --player-w: clamp(100px, min(35vw, 68svh), 900px);
        --var-promo-w: clamp(100px, min(79vw, 45svh), 650px);
        --var-promo-mb-coeff: 0.1204;
        --var-promo-p-coeff: 0.07334;
        --var-promo-br-coeff: 0.05853;
        --var-promo-gap-coeff: 0.02;
        --copy-btn-w-coeff: 0.1219;
        --logo-w-coeff: 0.49017;
        --logo-mb-coeff: 0.08455;
        --title-1-fs-coeff: 0.17162;
        --title-2-fs-coeff: 0.182162;
        --title-3-fs-coeff: 0.06513;
        --title-3-mb-coeff: 0.08455;
        --promo-subtitle-fs-coeff: 0.080455;
        --promo-subtitle-mb-coeff: 0.03252;
        --btn-w-coeff: 0.8061;
        --btn-fs-coeff: 0.095;
        --btn-br-coeff: 0.04252;
        --footer-p: clamp(10px, min(5vw, 3svh), 24px);
        --telegram-w-coeff: clamp(40px, min(2.7vw, 5.3svh), 70px);
        --telegram-fs: clamp(10px, min(0.9vw, 1.8svh), 21px);
        --telegram-p: clamp(4px, min(0.4vw, 0.8svh), 10px) clamp(8px, min(0.55vw, 1.2svh), 16px) clamp(4px, min(0.4vw, 0.8svh), 10px) clamp(8px, min(1vw, 1.8svh), 24px);
        --telegram-r: clamp(4px, min(0.4vw, 0.8svh), 8px);
        --app-store-link-w: clamp(70px, min(28vw, 15svh), 182px);
    }

    .btn {
        aspect-ratio: 289 / 64;
        max-width: 380px;
    }

    .content {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding-top: clamp(24px, min(8vw, 5svh), 46px);
    }

    .player__wrapper {
        width: auto;
        height: 100%;
    }

    .player__image {
        background: image-set(
                url("../img/player/player_mobile@1x.webp") 1x,
                url("../img/player/player_mobile@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .purple {
        width: 100%;
        bottom: -35%;
    }

    .stripes {
        position: absolute;
        inset: 0;
    }

    .stripe--blue-1,
    .stripe--light-blue-mask {
        left: -15%;
    }

    .stripe--blue-2,
    .stripe--green-mask {
        left: -25%;
    }

    .stripe--pink,
    .stripe--white-pink {
        right: -15%;
        z-index: 8;
    }
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 800px) {
    :root {
        --player-w: clamp(100px, min(35vw, 68svh), 900px);
        --var-promo-w: clamp(100px, min(75vw, 40svh), 520px);
        --var-promo-mb-coeff: 0;
        --var-promo-p-coeff: 0.07334;
        --var-promo-br-coeff: 0.05853;
        --var-promo-gap-coeff: 0.02;
        --copy-btn-w-coeff: 0.1219;
        --logo-w-coeff: 0.39017;
        --logo-mb-coeff: 0.06455;
        --title-1-fs-coeff: 0.17162;
        --title-2-fs-coeff: 0.182162;
        --title-3-fs-coeff: 0.06513;
        --title-3-mb-coeff: 0.040455;
        --promo-subtitle-fs-coeff: 0.080455;
        --promo-subtitle-mb-coeff: 0.03252;
        --btn-w-coeff: 0.7061;
        --btn-fs-coeff: 0.0805;
        --btn-br-coeff: 0.04252;
        --footer-p: clamp(10px, min(3vw, 2svh), 28px) clamp(10px, min(4vw, 3svh), 36px);
        --telegram-w-coeff: clamp(30px, min(5.4vw, 4svh), 70px);
        --telegram-fs: clamp(10px, min(1.4vw, 1svh), 21px);
        --telegram-p: clamp(4px, min(0.8vw, 1.2svh), 10px) clamp(8px, min(0.9vw, 1.6svh), 16px) clamp(4px, min(0.8vw, 1.2svh), 10px) clamp(8px, min(1.6vw, 2.4svh), 24px);
        --telegram-r: clamp(4px, min(0.4vw, 0.8svh), 8px);
        --app-store-link-w: clamp(70px, min(28vw, 15svh), 152px);
    }

    .player__image {
        background: image-set(
                url("../img/player/player_tablet@1x.webp") 1x,
                url("../img/player/player_tablet@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .btn {
        position: fixed;
        z-index: 10;
        left: 50%;
        bottom: 18%;
    }

    .btn.btn-pulse {
        -webkit-animation-name: pulse-centered;
        animation-name: pulse-centered;
    }

    .btn:active {
        transform: translateX(-50%) scale(0.98) translateY(1px);
    }

    .purple {
        width: 100%;
        bottom: -50%;
    }

    .stripe--blue-1,
    .stripe--light-blue-mask {
        left: 0;
    }

    .stripe--blue-2,
    .stripe--green-mask {
        left: -10%;
    }

    .stripe--pink,
    .stripe--white-pink {
        right: 2%;
        z-index: 8;
    }
}

@media (orientation: portrait) and (min-width: 1280px) and (min-height: 800px) {
    .player__image {
        background: image-set(
                url("../img/player/player_laptop@1x.webp") 1x,
                url("../img/player/player_laptop@2x.webp") 2x
        ) center/cover no-repeat;
    }
}

@media (orientation: portrait) and (min-width: 1640px) and (min-height: 800px) {
    .player__image {
        background: image-set(
                url("../img/player/player_desktop@1x.webp") 1x,
                url("../img/player/player_desktop@2x.webp") 2x
        ) center/cover no-repeat;
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    :root {
        --player-w: clamp(100px, min(41vw, 79svh), 1200px);
        --var-promo-w: clamp(100px, min(33vw, 65svh), 860px);
        --var-promo-mb-coeff: 0.048357;
        --var-promo-p-coeff: 0.07334;
        --var-promo-br-coeff: 0.05853;
        --var-promo-gap-coeff: 0.02;
        --copy-btn-w-coeff: 0.1219;
        --logo-w-coeff: 0.4397;
        --logo-mb-coeff: 0.0837;
        --title-1-fs-coeff: 0.18962;
        --title-2-fs-coeff: 0.1672062;
        --title-3-fs-coeff: 0.0605713;
        --title-3-mb-coeff: 0.050357;
        --promo-subtitle-fs-coeff: 0.065142;
        --promo-subtitle-mb-coeff: 0.03252;
        --btn-w-coeff: 0.48111;
        --btn-fs-coeff: 0.058;
        --btn-br-coeff: 0.03252;
        --footer-p: clamp(10px, min(1vw, 1.8svh), 24px) clamp(10px, min(2.3vw, 4.6svh), 60px) clamp(10px, min(1.4vw, 2.7svh), 36px) clamp(10px, min(1vw, 1.8svh), 24px);
        --telegram-w-coeff: clamp(30px, min(3.7vw, 6.3svh), 96px);
        --telegram-fs: clamp(10px, min(1.1vw, 2.0svh), 26px);
        --telegram-p: clamp(4px, min(0.4vw, 0.8svh), 10px) clamp(8px, min(1vw, 1.8svh), 24px) clamp(4px, min(0.4vw, 0.8svh), 10px) clamp(8px, min(1.6vw, 2.4svh), 36px);
        --telegram-r: clamp(4px, min(0.6vw, 1.0svh), 12px);
        --app-store-link-w: clamp(70px, min(7.2vw, 14svh), 182px);
    }

    .body {
        background: image-set(
                url("../img/bg/bg_landscape_mobile@1x.webp") 1x,
                url("../img/bg/bg_landscape_mobile@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 4%;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .description {
        flex: 0 0 auto;
        min-width: max-content;
    }

    .player__wrapper {
        position: relative;
        /*flex: 1 1 auto;*/
        /*min-width: 0;*/
        align-self: self-end;
        /*width: auto;*/
        /*width: min(48vw, 78svh);*/
        width: var(--player-w);
        /*max-width: 100%;*/
        height: auto;
        /*max-height: 98%;*/
    }

    .player__image {
        background: image-set(
                url("../img/player/player_mobile@1x.webp") 1x,
                url("../img/player/player_mobile@2x.webp") 2x
        ) center/cover no-repeat;
        background-size: contain;
        background-position: center bottom;
    }

    .description__footer {
        position: relative;
        z-index: 8;
    }

    .purple {
        width: 75vw;
        left: 50%;
        bottom: -70%;
    }

    .stripe--blue-1,
    .stripe--blue-2,
    .stripe--pink,
    .stripe--white-pink,
    .stripe--light-blue-mask,
    .stripe--green-mask {
        top: 0;
        transform: translate(-50%, -2%);
    }

    .stripe--blue-1,
    .stripe--light-blue-mask {
        left: 51%;
    }

    .stripe--blue-2,
    .stripe--green-mask {
        left: 82%;
    }

    .stripe--pink,
    .stripe--white-pink {
        left: 83%;
        z-index: 8;
    }
}

@media (orientation: landscape) and (min-width: 1024px) {
    .body {
        background: image-set(
                url("../img/bg/bg_landscape_tablet@1x.webp") 1x,
                url("../img/bg/bg_landscape_tablet@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .player__image {
        background: image-set(
                url("../img/player/player_tablet@1x.webp") 1x,
                url("../img/player/player_tablet@2x.webp") 2x
        ) center/cover no-repeat;
        background-size: contain;
        background-position: center bottom;
    }
}

@media (orientation: landscape) and (min-width: 1280px) {
    .player__image {
        background: image-set(
                url("../img/player/player_laptop@1x.webp") 1x,
                url("../img/player/player_laptop@2x.webp") 2x
        ) center/cover no-repeat;
        background-size: contain;
        background-position: center bottom;
    }
}

@media (orientation: landscape) and (min-width: 1440px) {
    .body {
        background: image-set(
                url("../img/bg/bg_landscape_desktop@1x.webp") 1x,
                url("../img/bg/bg_landscape_desktop@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .player__image {
        background: image-set(
                url("../img/player/player_desktop@1x.webp") 1x,
                url("../img/player/player_desktop@2x.webp") 2x
        ) center/cover no-repeat;
        background-size: contain;
        background-position: center bottom;
    }
}

@media (orientation: landscape) and (min-width: 1440px) {
    .player__image {
        background: image-set(
                url("../img/player/player_wide@1x.webp") 1x,
                url("../img/player/player_wide@2x.webp") 2x
        ) center/cover no-repeat;
        background-size: contain;
        background-position: center bottom;
    }
}