.marketing-popup-dialog {
    width: min(420px, calc(100vw - 32px), calc((84dvh - 42px) * 2 / 3));
    max-width: none;
    max-height: 84dvh;
    margin: auto;
    padding: 42px 0 0;
    border: 0;
    overflow: visible;
    background: transparent;
    color: #fff;
}
.marketing-popup-dialog::backdrop {
    background: #020617c7;
    backdrop-filter: blur(5px);
}
.marketing-popup-dialog[open] {
    animation: marketing-popup-in 0.22s ease-out;
}
.marketing-popup-close {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #ffffff57;
    border-radius: 50%;
    background: #071226d9;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 3px 12px #0006;
}
.marketing-popup-close .icon {
    width: 19px;
    height: 19px;
}
.marketing-popup-close:hover {
    background: #11213b;
    border-color: #fff;
}
.marketing-popup-close:focus-visible,
.marketing-popup-art:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 4px;
}
.marketing-popup-art {
    display: block;
    width: 100%;
    border-radius: 16px;
    line-height: 0;
}
.marketing-popup-art img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(84dvh - 42px);
    object-fit: contain;
    border-radius: inherit;
    box-shadow: 0 18px 60px #0008;
}
@keyframes marketing-popup-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
}
@media (prefers-reduced-motion: reduce) {
    .marketing-popup-dialog[open] {
        animation: none;
    }
}