Поправил отображение формы Основных данных

src/pages/newMedicalCard/components/BasicDataForm.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
   medical-form-wrapper(title="Основная информация")
-    .form-wrap.form.flex.gap-24.w-full
+    .form-wrap.gap-24.w-full
       .data-section.flex.flex-col.gap-4(v-for="data in configData")
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
-        .flex.justify-between.items-center.gap-4(v-for="field in data.fields")
+        .flex.w-full.justify-between.items-center.gap-4(v-for="field in data.fields")
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
           .avatar-field.justify-start(v-if="field.type === 'avatar'")
             base-avatar(:size="40")
@@ -55,15 +55,16 @@ export default {
   min-width: 310px
 .input
   color: purple
-.data-section
-  width: 30%
-  @media(max-width: 1900px)
-    width: 28%
-  @media(max-width: 1700px)
-    width: 100%
 .form-wrap
-  @media(max-width: 1700px)
-    flex-direction: column
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  grid-template-rows: repeat(1, 1fr)
+  @media(max-width: 1900px)
+    grid-template-columns: repeat(2, 1fr)
+    grid-template-rows: repeat(2, 1fr)
+  @media(max-width: 1320px)
+    grid-template-columns: repeat(1, 1fr)
+    grid-template-rows: repeat(3, 1fr)
 .label-field
   color: var(--font-grey-color)
 </style>