:root {
    --border-radius-3xl: 24px;
    --border-radius-24: var(--border-radius-3xl);
}
:root {
    --gap-s: 12px;
    --gap-m: 16px;
    --gap-3xl: 40px;
    --gap-0: 0px;
    --gap-6: 6px;
    --gap-12: var(--gap-s);
    --gap-16: var(--gap-m);
    --gap-40: var(--gap-3xl);
}
:root {
    --font-family-system:
        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
}
:root {
    --modal-border-radius: var(--border-radius-24);
    --modal-vertical-padding: var(--gap-40);
    --modal-s-header-paddings: 28px 28px var(--gap-0);
    --modal-s-header-desktop-content-paddings: var(--gap-12);
    --modal-l-header-desktop-content-paddings: var(--gap-6) var(--gap-12) var(--gap-16);
}
.header {
    border-top-left-radius: var(--modal-border-radius);
    border-top-right-radius: var(--modal-border-radius);
}
.size-500 .content,
.size-600 .content {
    padding: var(--modal-s-header-desktop-content-paddings);
    font-size: 22px;
    line-height: 26px;
    font-weight: 700;
    font-family: var(--font-family-system);
}
.size-800 .content,
.size-1140 .content,
.fullscreen .content {
    padding: var(--modal-l-header-desktop-content-paddings);
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
    font-family: var(--font-family-system);
}
.size-500,
.size-600,
.size-800,
.size-1140,
.fullscreen {
    padding: var(--modal-s-header-paddings);
}
.sticky {
    top: calc(var(--modal-vertical-padding) * -1);
}
.sticky.fullscreen {
        top: var(--gap-0);
    }