diff --git a/packages/vkui/src/components/ModalCard/ModalCard.module.css b/packages/vkui/src/components/ModalCard/ModalCard.module.css
index d1f887d4ae..6b0b9df620 100644
--- a/packages/vkui/src/components/ModalCard/ModalCard.module.css
+++ b/packages/vkui/src/components/ModalCard/ModalCard.module.css
@@ -2,7 +2,6 @@
   padding: var(--vkui--spacing_size_m);
   margin-inline: auto;
   inline-size: 100%;
-  box-sizing: border-box;
 }
 
 .host:focus {
@@ -10,72 +9,71 @@
 }
 
 .hostMaxWidthS {
-  max-inline-size: calc(400px + var(--vkui--spacing_size_2xl));
+  max-inline-size: 400px;
 }
 
 .hostMaxWidthM {
-  max-inline-size: calc(414px + var(--vkui--spacing_size_2xl));
+  max-inline-size: 414px;
 }
 
 .hostMaxWidthL {
-  max-inline-size: calc(440px + var(--vkui--spacing_size_2xl));
+  max-inline-size: 440px;
 }
 
 /* Mobile */
-@media (--viewWidth-smallTabletMinus) {
-  .host {
-    --vkui_internal_ModalCard--translateY: 100%;
-    --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
+.hostMobile {
+  --vkui_internal_ModalCard--translateY: 100%;
+  --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
 
-    position: absolute;
-    inset-inline: 0;
-    inset-block-end: 0;
-    margin-block-end: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
-    transform: translate3d(0, calc(100% - var(--vkui_internal_ModalCard--translateY)), 0);
-    transition: transform 0.4s var(--vkui_internal--spring-easing);
-  }
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  margin-block-end: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
+  transform: translate3d(0, calc(100% - var(--vkui_internal_ModalCard--translateY)), 0);
+  transition: transform 0.4s var(--vkui_internal--spring-easing);
+  box-sizing: border-box;
+}
 
-  .hostStateEnter {
-    transform: translate3d(0, 100%, 0);
-    transition: none;
-  }
+.hostMobile.hostStateEnter {
+  transform: translate3d(0, 100%, 0);
+  transition: none;
+}
 
-  .hostStateEntering {
-    transition: transform 0.5s var(--vkui_internal--slide-easing) 0.2s;
-  }
+.hostMobile.hostStateEntering {
+  transition: transform 0.5s var(--vkui_internal--slide-easing) 0.2s;
+}
 
-  .hostStateExiting {
-    transform: translate3d(0, 100%, 0);
-    transition: transform 0.2s ease;
-  }
+.hostMobile.hostStateExiting {
+  transform: translate3d(0, 100%, 0);
+  transition: transform 0.2s ease;
+}
 
-  .hostStateExited {
-    transform: translate3d(0, 100%, 0);
-    transition: none;
-  }
+.hostMobile.hostStateExited {
+  transform: translate3d(0, 100%, 0);
+  transition: none;
 }
+
 /* Desktop */
-@media (--viewWidth-smallTabletPlus) {
-  .host {
-    margin-block: auto;
-    opacity: 1;
-    transition: opacity 340ms var(--vkui--animation_easing_platform);
-  }
+.hostDesktop {
+  margin-block: auto;
+  opacity: 1;
+  transition: opacity 340ms var(--vkui--animation_easing_platform);
+  box-sizing: content-box;
+}
 
-  .hostStateEnter {
-    opacity: 0;
-    transition-property: none;
-  }
+.hostDesktop.hostStateEnter {
+  opacity: 0;
+  transition-property: none;
+}
 
-  .hostStateEntering {
-    opacity: 1;
-  }
+.hostDesktop.hostStateEntering {
+  opacity: 1;
+}
 
-  .hostStateExiting {
-    opacity: 0;
-  }
+.hostDesktop.hostStateExiting {
+  opacity: 0;
+}
 
-  .hostStateExited {
-    opacity: 0;
-  }
+.hostDesktop.hostStateExited {
+  opacity: 0;
 }
diff --git a/packages/vkui/src/components/ModalCard/ModalCardInternal.tsx b/packages/vkui/src/components/ModalCard/ModalCardInternal.tsx
index 835966a2a2..bd106d4c57 100644
--- a/packages/vkui/src/components/ModalCard/ModalCardInternal.tsx
+++ b/packages/vkui/src/components/ModalCard/ModalCardInternal.tsx
@@ -139,7 +139,7 @@ export const ModalCardInternal = ({
   useFocusTrap(ref, { autoFocus: !noFocusToDialog, disabled: !opened || hidden });
 
   return (
-    <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>
+    <ModalOutlet hidden={hidden} isDesktop={isDesktop} onKeyDown={handleEscKeyDown}>
       {modalOverlay}
       <ModalCardBase
         {...restProps}
@@ -150,6 +150,7 @@ export const ModalCardInternal = ({
         style={style}
         className={classNames(
           styles.host,
+          isDesktop ? styles.hostDesktop : styles.hostMobile,
           sizeByPlatformClassNames[platform],
           transitionStateClassNames[transitionState],
           className,
diff --git a/packages/vkui/src/components/ModalOutlet/ModalOutlet.module.css b/packages/vkui/src/components/ModalOutlet/ModalOutlet.module.css
index 4a3cd9a76f..ea7cf0a961 100644
--- a/packages/vkui/src/components/ModalOutlet/ModalOutlet.module.css
+++ b/packages/vkui/src/components/ModalOutlet/ModalOutlet.module.css
@@ -7,10 +7,8 @@
 }
 
 /* Desktop */
-@media (--viewWidth-smallTabletPlus) {
-  .host:not([hidden]) {
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-  }
+.hostDesktop:not([hidden]) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
 }
diff --git a/packages/vkui/src/components/ModalOutlet/ModalOutlet.tsx b/packages/vkui/src/components/ModalOutlet/ModalOutlet.tsx
index 961fc0db54..67386ee88b 100644
--- a/packages/vkui/src/components/ModalOutlet/ModalOutlet.tsx
+++ b/packages/vkui/src/components/ModalOutlet/ModalOutlet.tsx
@@ -5,6 +5,7 @@ import styles from './ModalOutlet.module.css';
 export interface ModalOutletProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'hidden' | 'aria-hidden'> {
   hidden?: boolean;
+  isDesktop?: boolean;
 }
 
 /**
@@ -13,6 +14,7 @@ export interface ModalOutletProps
 export const ModalOutlet = ({
   className,
   hidden,
+  isDesktop,
   children,
   getRootRef,
   ...restProps
@@ -20,7 +22,7 @@ export const ModalOutlet = ({
   return (
     <div
       ref={getRootRef}
-      className={classNames(className, styles.host)}
+      className={classNames(className, styles.host, isDesktop && styles.hostDesktop)}
       hidden={hidden}
       aria-hidden={hidden}
       {...restProps}
diff --git a/packages/vkui/src/components/ModalPage/ModalPage.module.css b/packages/vkui/src/components/ModalPage/ModalPage.module.css
index aa20bcc7b8..0b6fdc0e66 100644
--- a/packages/vkui/src/components/ModalPage/ModalPage.module.css
+++ b/packages/vkui/src/components/ModalPage/ModalPage.module.css
@@ -4,54 +4,65 @@
   block-size: var(--vkui_internal_ModalPage--userHeight);
   margin-inline: auto;
   outline: none;
-  box-sizing: border-box;
 }
 
 /* Mobile */
-@media (--viewWidth-smallTabletMinus) {
-  .host {
-    --vkui_internal_ModalPage--userHeight: 100%;
-
-    position: absolute;
-    inset-inline: 0;
-    inset-block-end: 0;
-    max-inline-size: var(--vkui--size_popup_small--regular);
-    pointer-events: none;
-  }
+.hostMobile {
+  --vkui_internal_ModalPage--userHeight: 100%;
+
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  max-inline-size: var(--vkui--size_popup_small--regular);
+  pointer-events: none;
+  box-sizing: border-box;
+}
 
-  .hostSafeAreaInsetTop {
-    max-block-size: calc(100% - var(--vkui_internal--safe_area_inset_top));
-  }
+.hostMobileSafeAreaInsetTop {
+  max-block-size: calc(100% - var(--vkui_internal--safe_area_inset_top));
+}
 
-  .hostSafeAreaInsetTopWithCustomOffset {
-    max-block-size: calc(
-      100% - (var(--vkui_internal--safe_area_inset_top) + var(--vkui_internal--panel_header_height))
-    );
-  }
+.hostMobileSafeAreaInsetTopWithCustomOffset {
+  max-block-size: calc(
+    100% - (var(--vkui_internal--safe_area_inset_top) + var(--vkui_internal--panel_header_height))
+  );
 }
+
 /* Desktop */
-@media (--viewWidth-smallTabletPlus) {
-  .host {
-    --vkui_internal_ModalPage--desktopMaxWidth: 100%;
-    --vkui_internal_ModalPage--userHeight: auto;
-
-    position: relative;
-    margin-block: auto;
-    max-inline-size: var(--vkui_internal_ModalPage--desktopMaxWidth);
-    max-block-size: calc(100% - 64px); /* FIXME 64px??? */
-  }
+.hostDesktop {
+  --vkui_internal_ModalPage--desktopSafeInsetBlock: calc(var(--vkui--spacing_size_2xl) * 2);
+  --vkui_internal_ModalPage--desktopMaxWidth: 100%;
+  --vkui_internal_ModalPage--desktopMaxHeight: 640px;
+  --vkui_internal_ModalPage--userHeight: auto;
+
+  position: relative;
+  margin-block: auto;
+  padding-inline: var(--vkui--spacing_size_xl);
+  padding-block: var(--vkui_internal_ModalPage--desktopSafeInsetBlock);
+  max-inline-size: var(--vkui_internal_ModalPage--desktopMaxWidth);
+  max-block-size: var(--vkui_internal_ModalPage--desktopMaxHeight);
+  box-sizing: content-box;
+}
 
-  .hostMaxWidthS {
-    --vkui_internal_ModalPage--desktopMaxWidth: var(--vkui--size_popup_small--regular);
+/* Неизвестный брейкпоинт */
+@media (max-height: 672px) {
+  .hostDesktop {
+    --vkui_internal_ModalPage--desktopMaxHeight: calc(
+      100% - var(--vkui_internal_ModalPage--desktopSafeInsetBlock) * 2
+    );
   }
+}
 
-  .hostMaxWidthM {
-    --vkui_internal_ModalPage--desktopMaxWidth: var(--vkui--size_popup_medium--regular);
-  }
+.hostDesktopMaxWidthS {
+  --vkui_internal_ModalPage--desktopMaxWidth: var(--vkui--size_popup_small--regular);
+}
 
-  .hostMaxWidthL {
-    --vkui_internal_ModalPage--desktopMaxWidth: var(--vkui--size_popup_large--regular);
-  }
+.hostDesktopMaxWidthM {
+  --vkui_internal_ModalPage--desktopMaxWidth: var(--vkui--size_popup_medium--regular);
+}
+
+.hostDesktopMaxWidthL {
+  --vkui_internal_ModalPage--desktopMaxWidth: var(--vkui--size_popup_large--regular);
 }
 
 .document {
@@ -67,67 +78,64 @@
 }
 
 /* Mobile */
-@media (--viewWidth-smallTabletMinus) {
-  .document {
-    --vkui_internal_ModalPageDocument--snapPoint: auto;
-    --vkui_internal_ModalPageDocument--safeAreaInsetBottom: var(
-      --vkui_internal--safe_area_inset_bottom
-    );
-
-    position: absolute;
-    inset-inline-start: 0;
-    inset-block-end: 0;
-    block-size: var(--vkui_internal_ModalPageDocument--snapPoint);
-    max-block-size: 100%;
-    padding-block-end: var(--vkui_internal_ModalPageDocument--safeAreaInsetBottom);
-    pointer-events: auto;
-    touch-action: pan-y;
-    transform: translate3d(0, 0, 0);
-    transition: block-size 0.4s var(--vkui_internal--spring-easing);
-  }
+.documentMobile {
+  --vkui_internal_ModalPageDocument--snapPoint: auto;
+  --vkui_internal_ModalPageDocument--safeAreaInsetBottom: var(
+    --vkui_internal--safe_area_inset_bottom
+  );
+
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  block-size: var(--vkui_internal_ModalPageDocument--snapPoint);
+  max-block-size: 100%;
+  padding-block-end: var(--vkui_internal_ModalPageDocument--safeAreaInsetBottom);
+  pointer-events: auto;
+  touch-action: pan-y;
+  transform: translate3d(0, 0, 0);
+  transition: block-size 0.4s var(--vkui_internal--spring-easing);
+}
 
-  .documentStateEnter {
-    transform: translate3d(0, 100%, 0);
-  }
+.documentMobile.documentStateEnter {
+  transform: translate3d(0, 100%, 0);
+}
 
-  .documentStateEntering {
-    transform: translate3d(0, 0, 0);
-    transition: transform 0.5s var(--vkui_internal--slide-easing) 0.1s;
-  }
+.documentMobile.documentStateEntering {
+  transform: translate3d(0, 0, 0);
+  transition: transform 0.5s var(--vkui_internal--slide-easing) 0.1s;
+}
 
-  .documentStateExiting {
-    transform: translate3d(0, 100%, 0);
-    transition: transform 0.2s ease;
-  }
+.documentMobile.documentStateExiting {
+  transform: translate3d(0, 100%, 0);
+  transition: transform 0.2s ease;
+}
 
-  .documentStateExited {
-    transform: translate3d(0, 100%, 0);
-  }
+.documentMobile.documentStateExited {
+  transform: translate3d(0, 100%, 0);
 }
+
 /* Desktop */
-@media (--viewWidth-smallTabletPlus) {
-  .document {
-    position: relative;
-    block-size: auto;
-  }
+.documentDesktop {
+  position: relative;
+  block-size: auto;
+}
 
-  .documentStateEnter {
-    opacity: 0;
-  }
+.documentDesktop.documentStateEnter {
+  opacity: 0;
+}
 
-  .documentStateEntering {
-    opacity: 1;
-    transition: opacity 0.2s ease-in 0.1s;
-  }
+.documentDesktop.documentStateEntering {
+  opacity: 1;
+  transition: opacity 0.2s ease-in 0.1s;
+}
 
-  .documentStateExiting {
-    opacity: 0;
-    transition: opacity 0.1s ease-out;
-  }
+.documentDesktop.documentStateExiting {
+  opacity: 0;
+  transition: opacity 0.1s ease-out;
+}
 
-  .documentStateExited {
-    opacity: 0;
-  }
+.documentDesktop.documentStateExited {
+  opacity: 0;
 }
 
 .children {
@@ -151,10 +159,8 @@
 }
 
 /* Desktop */
-@media (--viewWidth-smallTabletPlus) {
-  .children {
-    border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
-    border-end-start-radius: var(--vkui--size_border_radius_paper--regular);
-    box-shadow: var(--vkui--elevation3);
-  }
+.childrenDesktop {
+  border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
+  border-end-start-radius: var(--vkui--size_border_radius_paper--regular);
+  box-shadow: var(--vkui--elevation3);
 }
diff --git a/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx b/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx
index 0eeca38da0..da647808c7 100644
--- a/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx
+++ b/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx
@@ -120,7 +120,9 @@ export const ModalPageInternal = ({
   const disableContentPanningGestureProp = disableContentPanningGesture
     ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE
     : undefined;
-  const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(desktopMaxWidth);
+  const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(
+    isDesktop ? desktopMaxWidth : 's',
+  );
 
   const modalOverlay = (
     <ModalOverlay
@@ -161,7 +163,7 @@ export const ModalPageInternal = ({
   useScrollLock(!hidden);
 
   return (
-    <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>
+    <ModalOutlet hidden={hidden} isDesktop={isDesktop} onKeyDown={handleEscKeyDown}>
       {modalOverlay}
       <FocusTrap
         {...restProps}
@@ -172,11 +174,13 @@ export const ModalPageInternal = ({
         className={classNames(
           className,
           styles.host,
-          sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',
-          hasCustomPanelHeaderAfter
-            ? styles.hostSafeAreaInsetTopWithCustomOffset
-            : styles.hostSafeAreaInsetTop,
+          isDesktop ? styles.hostDesktop : styles.hostMobile,
+          !isDesktop &&
+            (hasCustomPanelHeaderAfter
+              ? styles.hostMobileSafeAreaInsetTopWithCustomOffset
+              : styles.hostMobileSafeAreaInsetTop),
           desktopMaxWidthClassName,
+          sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',
         )}
         style={{
           ...style,
@@ -189,10 +193,14 @@ export const ModalPageInternal = ({
           ref={handleSheetRef}
           role="document"
           style={documentStyle}
-          className={classNames(styles.document, transitionStateClassNames[transitionState])}
+          className={classNames(
+            styles.document,
+            isDesktop ? styles.documentDesktop : styles.documentMobile,
+            transitionStateClassNames[transitionState],
+          )}
           onTransitionEnd={onTransitionEnd}
         >
-          <div className={styles.children}>
+          <div className={classNames(styles.children, isDesktop && styles.childrenDesktop)}>
             {hasReactNode(header) && header}
             <ModalPageContent
               getRootRef={handleSheetScrollRef}
@@ -211,9 +219,9 @@ export const ModalPageInternal = ({
 };
 
 const desktopMaxWidthClassNames = {
-  s: styles['hostMaxWidthS'],
-  m: styles['hostMaxWidthM'],
-  l: styles['hostMaxWidthL'],
+  s: styles['hostDesktopMaxWidthS'],
+  m: styles['hostDesktopMaxWidthM'],
+  l: styles['hostDesktopMaxWidthL'],
 };
 
 function resolveDesktopMaxWidth(
diff --git a/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.module.css b/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.module.css
index 62c4bfc1a9..51ecd3dcbf 100644
--- a/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.module.css
+++ b/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.module.css
@@ -17,17 +17,13 @@
 }
 
 /* Mobile */
-@media (--viewWidth-smallTabletMinus) {
-  .padded {
-    padding-block: var(--vkui--size_base_padding_vertical--regular);
-    padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  }
+.hostMobile.padded {
+  padding-block: var(--vkui--size_base_padding_vertical--regular);
+  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 /* Desktop */
-@media (--viewWidth-smallTabletPlus) {
-  .padded {
-    padding-block: 18px;
-    padding-inline: 16px;
-  }
+.hostDesktop.padded {
+  padding-block: 18px;
+  padding-inline: 16px;
 }
diff --git a/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.tsx b/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.tsx
index 41b1419821..0f371722d1 100644
--- a/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.tsx
+++ b/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.tsx
@@ -18,10 +18,14 @@ export const ModalPageFooter = ({
   children,
   ...restProps
 }: ModalPageFooterProps) => {
-  const { sizeX } = useAdaptivityWithJSMediaQueries();
+  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();
   return (
     <RootComponent
-      baseClassName={classNames(styles.host, !noPadding && styles.padded)}
+      baseClassName={classNames(
+        styles.host,
+        !noPadding && styles.padded,
+        isDesktop ? styles.hostDesktop : styles.hostMobile,
+      )}
       {...restProps}
     >
       {!noSeparator && <Separator className={styles.Separator} padding={sizeX !== 'regular'} />}