.cpx-mobile-promo {
    position: relative;
    isolation: isolate;
    container-type: inline-size;
    width: 100%;
    height: 182px;
    overflow: clip;
    border-radius: 15px;
    background: linear-gradient(180deg,
        #525254 0%, #545456 5.8124%, #555456 12.345%, #545255 18.877%,
        #514f52 24.413%, #505054 27.845%, #505050 33.602%, #504e52 40.356%,
        #504e53 50.431%, #4b4b4d 57.517%, #4b4c47 65.71%, #4a4549 75.564%,
        #444243 87.632%, #45443f 94.171%, #43423e 100%);
}

.cpx-mobile-promo__photo {
    position: absolute;
    top: -17px;
    left: -5px;
    width: 56.74%;
    max-width: 202px;
    pointer-events: none;
}

.cpx-mobile-promo__photo img {
    display: block;
    width: 100%;
    height: auto;
}

.cpx-mobile-promo__circle {
    position: absolute;
    pointer-events: none;
}

.cpx-mobile-promo__circle--top {
    top: 8px;
    right: 21px;
}

.cpx-mobile-promo__circle--title {
    top: 93px;
    right: 7px;
}

.cpx-mobile-promo__circle--small {
    top: 128px;
    right: 38px;
}

.cpx-mobile-promo__body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    margin-left: min(52%, 185px);
    padding: 14px 11px 11px 10px;
}

.cpx-mobile-promo__label {
    color: var(--cpx-brand-yellow);
}

.cpx-mobile-promo__title {
    white-space: nowrap;
    color: var(--cpx-white-1);
}

.cpx-mobile-promo__button {
    box-sizing: border-box;
    width: 100%;
    max-width: 149px;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 19%));
}

.cpx-mobile-promo__subtitle {
    margin-top: -6px;
    margin-bottom: 10px;
    color: var(--cpx-white-1);
    text-align: right;
}

@container (width < 350px) {
    .cpx-mobile-promo__photo {
        width: 43%;
    }

    .cpx-mobile-promo__body {
        margin-left: 40%;
    }
}