@bagelink/vue 0.0.322 → 0.0.335

package/src/styles/mobilLayout.css

@@ -0,0 +1,1476 @@
+@media screen and (max-width: 910px) {
+    .m_block {
+        display: block !important;
+    }
+
+    .m_inline {
+        display: inline !important;
+    }
+
+    .m_inline-block {
+        display: inline-block !important;
+    }
+
+    .m_flex {
+        display: flex !important;
+    }
+
+    .m_grid {
+        display: grid !important;
+    }
+
+    .m_hide,
+    .m_none,
+    .m_display-none {
+        display: none !important;
+    }
+
+    .m_inline-grid {
+        display: inline-grid;
+    }
+
+    .m_fill {
+        width: 100vw;
+        height: 100vh;
+    }
+
+    .m_justify-items-center {
+        justify-items: center;
+    }
+
+    .m_justify-content-center {
+        justify-content: center;
+    }
+
+    .m_justify-content-start {
+        justify-content: start;
+    }
+
+    .m_align-content-center {
+        align-content: center;
+    }
+
+    .m_align-items-top {
+        align-items: flex-start !important;
+    }
+
+    .m_align-items-center {
+        align-items: center;
+    }
+
+    .m_align-items-end {
+        align-items: end !important;
+    }
+
+    .m_fit-content {
+        width: fit-content;
+        height: fit-content;
+    }
+
+    .m_auto-flow-columns {
+        grid-auto-flow: column;
+    }
+
+    .m_grid-2-col {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .m_justify-content-between {
+        justify-content: space-between;
+    }
+
+    .m_justify-self-start {
+        justify-self: start;
+    }
+
+    .m_columns-max-content {
+        grid-auto-columns: max-content;
+    }
+
+    .m_rows-max-content {
+        grid-auto-rows: max-content;
+    }
+
+    .m_grid.overflow>* {
+        min-width: 0px;
+        overflow: auto;
+    }
+
+    .m_justify-content-around {
+        justify-content: space-between;
+    }
+
+    .m_justify-content-end {
+        justify-content: end;
+    }
+
+    .m_justify-self-end {
+        justify-self: end;
+    }
+
+    .m_justify-self-center {
+        justify-self: center;
+    }
+
+    .m_position-start {
+        position: absolute;
+        top: 0px;
+        inset-inline-start: 0px;
+    }
+
+    .m_position-end {
+        position: absolute;
+        top: 0px;
+        inset-inline-end: 0px;
+    }
+
+    .m_positioned-full {
+        top: 0;
+        bottom: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+    }
+
+    .m_auto-flow-rows {
+        grid-auto-flow: row;
+    }
+
+    .m_align-items-start {
+        align-items: start !important;
+    }
+
+    .m_align-self-end {
+        align-self: end;
+    }
+
+    .min-100,
+    .m_min100 {
+        min-height: 100%;
+    }
+
+    .m_w-100,
+    .m_width-100 {
+        width: 100% !important;
+    }
+
+    .m_w300,
+    .m_w350,
+    .m_w400,
+    .m_w450,
+    .m_w500,
+    .m_w550,
+    .m_w600,
+    .m_w650,
+    .m_w700,
+    .m_w750,
+    .m_w770,
+    .m_w800,
+    .m_w850,
+    .m_w900 {
+        margin-inline-start: auto;
+        margin-inline-end: auto;
+        width: 98%;
+    }
+
+    .m_w10 {
+        max-width: 10px;
+    }
+
+    .m_w20 {
+        max-width: 20px;
+    }
+
+    .m_w20 {
+        max-width: 20px;
+    }
+
+    .m_w30 {
+        max-width: 30px;
+    }
+
+    .m_w40 {
+        max-width: 40px;
+    }
+
+    .m_w50 {
+        max-width: 50px;
+    }
+
+    .m_w60 {
+        max-width: 60px;
+    }
+
+    .m_w70 {
+        max-width: 70px;
+    }
+
+    .m_w80 {
+        max-width: 80px;
+    }
+
+    .m_w90 {
+        max-width: 90px;
+    }
+
+    .m_w100 {
+        max-width: 100px;
+    }
+
+    .m_w150 {
+        max-width: 150px;
+    }
+
+    .m_w200 {
+        max-width: 200px;
+    }
+
+    .m_w250 {
+        max-width: 250px;
+    }
+
+    .m_w300 {
+        max-width: 300px;
+    }
+
+    .m_w350 {
+        max-width: 350px;
+    }
+
+    .m_w400 {
+        max-width: 400px;
+    }
+
+    .m_w450 {
+        max-width: 450px;
+    }
+
+    .m_w500 {
+        max-width: 500px;
+    }
+
+    .m_w550 {
+        max-width: 550px;
+    }
+
+    .m_w600 {
+        max-width: 600px;
+    }
+
+    .m_w650 {
+        max-width: 650px;
+    }
+
+    .m_w700 {
+        max-width: 700px;
+    }
+
+    .m_w750 {
+        max-width: 750px;
+    }
+
+    .m_w770 {
+        max-width: 770px;
+    }
+
+    .m_w800 {
+        max-width: 800px;
+    }
+
+    .m_w850 {
+        max-width: 850px;
+    }
+
+    .m_w-all,
+    .m_wall {
+        width: -webkit-fill-available;
+    }
+
+    .m_h-all,
+    .m_hall {
+        height: -webkit-fill-available;
+    }
+
+    .m_gap-0 {
+        gap: 0;
+    }
+
+    .m_gap-025 {
+        gap: 0.25rem;
+    }
+
+    .m_gap-05 {
+        gap: 0.5rem;
+    }
+
+    .m_gap-075 {
+        gap: 0.75rem;
+    }
+
+    .m_gap-1 {
+        gap: 1rem;
+    }
+
+    .m_gap-2 {
+        gap: 2rem;
+    }
+
+    .m_gap-3 {
+        gap: 3rem;
+    }
+
+    .m_gap-4 {
+        gap: 4rem;
+    }
+
+    .m_gap-5 {
+        gap: 5rem;
+    }
+
+    .m_gap-col-0,
+    .m_col-gap-0 {
+        column-gap: 0rem;
+    }
+
+    .m_gap-col-025,
+    .m_col-gap-025 {
+        column-gap: 0.25rem;
+    }
+
+    .m_gap-col-05,
+    .m_col-gap-05 {
+        column-gap: 0.5rem;
+    }
+
+    .m_gap-col-075,
+    .m_col-gap-075 {
+        column-gap: 0.75rem;
+    }
+
+    .m_gap-col-1,
+    .m_col-gap-1 {
+        column-gap: 1rem;
+    }
+
+    .m_gap-col-2,
+    .m_col-gap-2 {
+        column-gap: 2rem;
+    }
+
+    .m_gap-col-3,
+    .m_col-gap-3 {
+        column-gap: 3rem;
+    }
+
+    .m_gap-col-4,
+    .m_col-gap-4 {
+        column-gap: 4rem;
+    }
+
+    .m_gap-col-5,
+    .m_col-gap-5 {
+        column-gap: 5rem;
+    }
+
+    .m_gap-row-0,
+    .m_row-gap-0 {
+        row-gap: 0rem;
+    }
+
+    .m_gap-row-025,
+    .m_row-gap-025 {
+        row-gap: 0.25rem;
+    }
+
+    .m_gap-row-05,
+    .m_row-gap-05 {
+        row-gap: 0.5rem;
+    }
+
+    .m_gap-row-075,
+    .m_row-gap-075 {
+        row-gap: 0.75rem;
+    }
+
+    .m_gap-row-1,
+    .m_row-gap-1 {
+        row-gap: 1rem;
+    }
+
+    .m_gap-row-2,
+    .m_row-gap-2 {
+        row-gap: 2rem;
+    }
+
+    .m_gap-row-3,
+    .m_row-gap-3 {
+        row-gap: 3rem;
+    }
+
+    .m_gap-row-4,
+    .m_row-gap-4 {
+        row-gap: 4rem;
+    }
+
+    .m_gap-row-5,
+    .m_row-gap-5 {
+        row-gap: 5rem;
+    }
+
+    .m_flex-wrap {
+        flex-wrap: wrap;
+    }
+
+    .m_column {
+        flex-direction: column;
+    }
+
+    .m_row {
+        flex-direction: row;
+    }
+
+    .m_flex-grow {
+        flex-grow: 1;
+    }
+
+    .m_flex-shrink {
+        flex-shrink: 1;
+    }
+
+    .m_flex-2-col {
+        max-width: 50%;
+        flex: 1 1 calc(50% - 2rem);
+    }
+
+    .m_flex-3-col {
+        flex: 1 1 33.33333%;
+    }
+
+    .m_mb-auto {
+        margin-bottom: auto !important;
+    }
+
+    .m_mb-0 {
+        margin-bottom: 0rem !important;
+    }
+
+    .m_mb-025 {
+        margin-bottom: 0.25rem !important;
+    }
+
+    .m_mb-05 {
+        margin-bottom: 0.5rem !important;
+    }
+
+    .m_mb-075 {
+        margin-bottom: 0.75rem !important;
+    }
+
+    .m_mb-1 {
+        margin-bottom: 1rem !important;
+    }
+
+    .m_mb-2 {
+        margin-bottom: 2rem !important;
+    }
+
+    .m_mb-3 {
+        margin-bottom: 3rem !important;
+    }
+
+    .m_mb-4 {
+        margin-bottom: 4rem !important;
+    }
+
+    .m_mt-auto {
+        margin-top: auto !important;
+    }
+
+    .m_mt-0 {
+        margin-top: 0rem !important;
+    }
+
+    .m_mt-025 {
+        margin-top: 0.25rem !important;
+    }
+
+    .m_mt-05 {
+        margin-top: 0.5rem !important;
+    }
+
+    .m_mt-075 {
+        margin-top: 0.75rem !important;
+    }
+
+    .m_mt-1 {
+        margin-top: 1rem !important;
+    }
+
+    .m_mt-2 {
+        margin-top: 2rem !important;
+    }
+
+    .m_mt-3 {
+        margin-top: 3rem !important;
+    }
+
+    .m_mt-4 {
+        margin-top: 4rem !important;
+    }
+
+    .m_my-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important;
+    }
+
+    .m_my-0 {
+        margin-top: 0rem !important;
+        margin-bottom: 0rem !important;
+    }
+
+    .m_my-025 {
+        margin-top: 0.25rem !important;
+        margin-bottom: 0.25rem !important;
+    }
+
+    .m_my-05 {
+        margin-top: 0.5rem !important;
+        margin-bottom: 0.5rem !important;
+    }
+
+    .m_my-075 {
+        margin-top: 0.75rem !important;
+        margin-bottom: 0.75rem !important;
+    }
+
+    .m_my-1 {
+        margin-top: 1rem !important;
+        margin-bottom: 1rem !important;
+    }
+
+    .m_my-2 {
+        margin-top: 2rem !important;
+        margin-bottom: 2rem !important;
+    }
+
+    .m_my-3 {
+        margin-top: 3rem !important;
+        margin-bottom: 3rem !important;
+    }
+
+    .m_my-4 {
+        margin-top: 4rem !important;
+        margin-bottom: 4rem !important;
+    }
+
+    .m_ms-auto {
+        margin-inline-start: auto !important;
+    }
+
+    .m_ms-0 {
+        margin-inline-start: 0rem !important;
+    }
+
+    .m_ms-025 {
+        margin-inline-start: 0.25rem !important;
+    }
+
+    .m_ms-05 {
+        margin-inline-start: 0.5rem !important;
+    }
+
+    .m_ms-075 {
+        margin-inline-start: 0.75rem !important;
+    }
+
+    .m_ms-1 {
+        margin-inline-start: 1rem !important;
+    }
+
+    .m_ms-2 {
+        margin-inline-start: 2rem !important;
+    }
+
+    .m_ms-3 {
+        margin-inline-start: 3rem !important;
+    }
+
+    .m_ms-4 {
+        margin-inline-start: 4rem !important;
+    }
+
+    .m_me-auto {
+        margin-inline-end: auto !important;
+    }
+
+    .m_me-0 {
+        margin-inline-end: 0rem !important;
+    }
+
+    .m_me-025 {
+        margin-inline-end: 0.25rem !important;
+    }
+
+    .m_me-05 {
+        margin-inline-end: 0.5rem !important;
+    }
+
+    .m_me-075 {
+        margin-inline-end: 0.75rem !important;
+    }
+
+    .m_me-1 {
+        margin-inline-end: 1rem !important;
+    }
+
+    .m_me-2 {
+        margin-inline-end: 2rem !important;
+    }
+
+    .m_me-3 {
+        margin-inline-end: 3rem !important;
+    }
+
+    .m_me-4 {
+        margin-inline-end: 4rem !important;
+    }
+
+    .mx-auto,
+    .m_margin-auto {
+        margin-inline-start: auto !important;
+        margin-inline-end: auto !important;
+    }
+
+    .m_mx-0 {
+        margin-inline-start: 0rem !important;
+        margin-inline-end: 0rem !important;
+    }
+
+    .m_mx-025 {
+        margin-inline-start: 0.25rem !important;
+        margin-inline-end: 0.25rem !important;
+    }
+
+    .m_mx-05 {
+        margin-inline-start: 0.5rem !important;
+        margin-inline-end: 0.5rem !important;
+    }
+
+    .m_mx-075 {
+        margin-inline-start: 0.75rem !important;
+        margin-inline-end: 0.75rem !important;
+    }
+
+    .m_mx-1 {
+        margin-inline-start: 1rem !important;
+        margin-inline-end: 1rem !important;
+    }
+
+    .m_mx-2 {
+        margin-inline-start: 2rem !important;
+        margin-inline-end: 2rem !important;
+    }
+
+    .m_mx-3 {
+        margin-inline-start: 3rem !important;
+        margin-inline-end: 3rem !important;
+    }
+
+    .m_mx-4 {
+        margin-inline-start: 4rem !important;
+        margin-inline-end: 4rem !important;
+    }
+
+    .m_m-auto {
+        margin: auto !important;
+    }
+
+    .m_m-0 {
+        margin: 0rem !important;
+    }
+
+    .m_m-025 {
+        margin: 0.25rem !important;
+    }
+
+    .m_m-05 {
+        margin: 0.5rem !important;
+    }
+
+    .m_m-075 {
+        margin: 0.75rem !important;
+    }
+
+    .m_m-1 {
+        margin: 1rem !important;
+    }
+
+    .m_m-2 {
+        margin: 2rem !important;
+    }
+
+    .m_m-3 {
+        margin: 3rem !important;
+    }
+
+    .m_m-4 {
+        margin: 4rem !important;
+    }
+
+    .m_-mb-025 {
+        margin-bottom: -0.25rem !important;
+    }
+
+    .m_-mb-05 {
+        margin-bottom: -0.5rem !important;
+    }
+
+    .m_-mb-075 {
+        margin-bottom: -0.75rem !important;
+    }
+
+    .m_-mb-1 {
+        margin-bottom: -1rem !important;
+    }
+
+    .m_-mb-2 {
+        margin-bottom: -2rem !important;
+    }
+
+    .m_-mb-3 {
+        margin-bottom: -3rem !important;
+    }
+
+    .m_-mb-4 {
+        margin-bottom: -4rem !important;
+    }
+
+    .m_-mt-025 {
+        margin-top: -0.25rem !important;
+    }
+
+    .m_-mt-05 {
+        margin-top: -0.5rem !important;
+    }
+
+    .m_-mt-075 {
+        margin-top: 0.75rem !important;
+    }
+
+    .m_-mt-1 {
+        margin-top: -1rem !important;
+    }
+
+    .m_-mt-2 {
+        margin-top: -2rem !important;
+    }
+
+    .m_-mt-3 {
+        margin-top: -3rem !important;
+    }
+
+    .m_-mt-4 {
+        margin-top: -4rem !important;
+    }
+
+    .m_-my-025 {
+        margin-top: -0.25rem !important;
+        margin-bottom: -0.25rem !important;
+    }
+
+    .m_-my-05 {
+        margin-top: -0.5rem !important;
+        margin-bottom: -0.5rem !important;
+    }
+
+    .m_-my-075 {
+        margin-top: 0.75rem !important;
+        margin-bottom: 0.75rem !important;
+    }
+
+    .m_-my-1 {
+        margin-top: -1rem !important;
+        margin-bottom: -1rem !important;
+    }
+
+    .m_-my-2 {
+        margin-top: -2rem !important;
+        margin-bottom: -2rem !important;
+    }
+
+    .m_-my-3 {
+        margin-top: -3rem !important;
+        margin-bottom: -3rem !important;
+    }
+
+    .m_-my-4 {
+        margin-top: -4rem !important;
+        margin-bottom: -4rem !important;
+    }
+
+    .m_-ms-025 {
+        margin-inline-start: -0.25rem !important;
+    }
+
+    .m_-ms-05 {
+        margin-inline-start: -0.5rem !important;
+    }
+
+    .m_-ms-075 {
+        margin-inline-start: -0.75rem !important;
+    }
+
+    .m_-ms-1 {
+        margin-inline-start: -1rem !important;
+    }
+
+    .m_-ms-2 {
+        margin-inline-start: -2rem !important;
+    }
+
+    .m_-ms-3 {
+        margin-inline-start: -3rem !important;
+    }
+
+    .m_-ms-4 {
+        margin-inline-start: -4rem !important;
+    }
+
+    .m_-me-025 {
+        margin-inline-end: -0.25rem !important;
+    }
+
+    .m_-me-05 {
+        margin-inline-end: -0.5rem !important;
+    }
+
+    .m_-me-075 {
+        margin-inline-end: -0.75rem !important;
+    }
+
+    .m_-me-1 {
+        margin-inline-end: -1rem !important;
+    }
+
+    .m_-me-2 {
+        margin-inline-end: -2rem !important;
+    }
+
+    .m_-me-3 {
+        margin-inline-end: -3rem !important;
+    }
+
+    .m_-me-4 {
+        margin-inline-end: -4rem !important;
+    }
+
+    .m_pb-0 {
+        padding-bottom: 0rem !important;
+    }
+
+    .m_pb-1 {
+        padding-bottom: 1rem !important;
+    }
+
+    .m_pb-2 {
+        padding-bottom: 2rem !important;
+    }
+
+    .m_pb-3 {
+        padding-bottom: 3rem !important;
+    }
+
+    .m_pb-4 {
+        padding-bottom: 4rem !important;
+    }
+
+    .m_pb-075 {
+        padding-bottom: 0.75rem !important;
+    }
+
+    .m_pb-05 {
+        padding-bottom: 0.5rem !important;
+    }
+
+    .m_pb-025 {
+        padding-bottom: 0.25rem !important;
+    }
+
+    .m_pt-0 {
+        padding-top: 0rem !important;
+    }
+
+    .m_pt-1 {
+        padding-top: 1rem !important;
+    }
+
+    .m_pt-2 {
+        padding-top: 2rem !important;
+    }
+
+    .m_pt-3 {
+        padding-top: 3rem !important;
+    }
+
+    .m_pt-4 {
+        padding-top: 4rem !important;
+    }
+
+    .m_pt-075 {
+        padding-top: 0.75rem !important;
+    }
+
+    .m_pt-05 {
+        padding-top: 0.5rem !important;
+    }
+
+    .m_pt-025 {
+        padding-top: 0.25rem !important;
+    }
+
+    .m_ps-0 {
+        padding-inline-start: 0rem !important;
+    }
+
+    .m_ps-1 {
+        padding-inline-start: 1rem !important;
+    }
+
+    .m_ps-2 {
+        padding-inline-start: 2rem !important;
+    }
+
+    .m_ps-3 {
+        padding-inline-start: 3rem !important;
+    }
+
+    .m_ps-4 {
+        padding-inline-start: 4rem !important;
+    }
+
+    .m_ps-075 {
+        padding-inline-start: 0.75rem !important;
+    }
+
+    .m_ps-05 {
+        padding-inline-start: 0.5rem !important;
+    }
+
+    .m_ps-025 {
+        padding-inline-start: 0.25rem !important;
+    }
+
+    .m_pe-0 {
+        padding-inline-end: 0rem !important;
+    }
+
+    .m_pe-1 {
+        padding-inline-end: 1rem !important;
+    }
+
+    .m_pe-2 {
+        padding-inline-end: 2rem !important;
+    }
+
+    .m_pe-3 {
+        padding-inline-end: 3rem !important;
+    }
+
+    .m_pe-4 {
+        padding-inline-end: 4rem !important;
+    }
+
+    .m_pe-075 {
+        padding-inline-end: 0.75rem !important;
+    }
+
+    .m_pe-05 {
+        padding-inline-end: 0.5rem !important;
+    }
+
+    .m_pe-025 {
+        padding-inline-end: 0.25rem !important;
+    }
+
+    .m_px-0 {
+        padding-inline-end: 0rem !important;
+        padding-inline-start: 0rem !important;
+    }
+
+    .m_px-1 {
+        padding-inline-end: 1rem !important;
+        padding-inline-start: 1rem !important;
+    }
+
+    .m_px-2 {
+        padding-inline-end: 2rem !important;
+        padding-inline-start: 2rem !important;
+    }
+
+    .m_px-3 {
+        padding-inline-end: 3rem !important;
+        padding-inline-start: 3rem !important;
+    }
+
+    .m_px-4 {
+        padding-inline-end: 4rem !important;
+        padding-inline-start: 4rem !important;
+    }
+
+    .m_px-075 {
+        padding-inline-end: 0.75rem !important;
+        padding-inline-start: 0.75rem !important;
+    }
+
+    .m_px-05 {
+        padding-inline-end: 0.5rem !important;
+        padding-inline-start: 0.5rem !important;
+    }
+
+    .m_px-025 {
+        padding-inline-end: 0.25rem !important;
+        padding-inline-start: 0.25rem !important;
+    }
+
+    .m_py-0 {
+        padding-top: 0rem !important;
+        padding-bottom: 0rem !important;
+    }
+
+    .m_py-1 {
+        padding-top: 1rem !important;
+        padding-bottom: 1rem !important;
+    }
+
+    .m_py-2 {
+        padding-top: 2rem !important;
+        padding-bottom: 2rem !important;
+    }
+
+    .m_py-3 {
+        padding-top: 3rem !important;
+        padding-bottom: 3rem !important;
+    }
+
+    .m_py-4 {
+        padding-top: 4rem !important;
+        padding-bottom: 4rem !important;
+    }
+
+    .m_py-075 {
+        padding-top: 0.75rem !important;
+        padding-bottom: 0.75rem !important;
+    }
+
+    .m_py-05 {
+        padding-top: 0.5rem !important;
+        padding-bottom: 0.5rem !important;
+    }
+
+    .m_py-025 {
+        padding-top: 0.25rem !important;
+        padding-bottom: 0.25rem !important;
+    }
+
+    .m_p-0 {
+        padding: 0rem !important;
+    }
+
+    .m_p-1 {
+        padding: 1rem !important;
+    }
+
+    .m_p-2 {
+        padding: 2rem !important;
+    }
+
+    .m_p-3 {
+        padding: 3rem !important;
+    }
+
+    .m_p-4 {
+        padding: 4rem !important;
+    }
+
+    .m_p-075 {
+        padding: 0.75rem !important;
+    }
+
+    .m_p-05 {
+        padding: 0.5rem !important;
+    }
+
+    .m_p-025 {
+        padding: 0.25rem !important;
+    }
+
+    .m_relative,
+    .m_position-relative {
+        position: relative !important;
+    }
+
+    .m_absolute,
+    .m_position-absolute {
+        position: absolute !important;
+    }
+
+    .m_fixed,
+    .m_position-fixed {
+        position: fixed !important;
+    }
+
+    .m_static,
+    .m_position-static {
+        position: static !important;
+    }
+
+    .m_sticky,
+    .m_position-sticky {
+        position: sticky !important;
+    }
+
+    .m_flex-stretch {
+        display: flex;
+        align-items: stretch;
+    }
+
+    .m_flex-end {
+        justify-content: flex-end;
+    }
+
+    .m_space-between {
+        justify-content: space-between;
+    }
+
+    .m_label {
+        display: block;
+        font-size: var(--label-font-size);
+        margin-bottom: 2px;
+        line-height: 1.3;
+        color: var(--label-color);
+    }
+
+    .m_h-10 {
+        height: 10%;
+    }
+
+    .m_vh-10 {
+        height: 10vh;
+    }
+
+    .m_h-10px {
+        height: 10px;
+    }
+
+    .m_hm-10px {
+        max-height: 10px;
+    }
+
+
+    .m_h-20 {
+        height: 20%;
+    }
+
+    .m_vh-20 {
+        height: 20vh;
+    }
+
+    .m_h-20px {
+        height: 20px;
+    }
+
+    .m_hm-20px {
+        max-height: 20px;
+    }
+
+    .m_h-30 {
+        height: 30%;
+    }
+
+    .m_vh-30 {
+        height: 30vh;
+    }
+
+    .m_h-30px {
+        height: 30px;
+    }
+
+    .m_hm-30px {
+        max-height: 30px;
+    }
+
+    .m_h-40 {
+        height: 40%;
+    }
+
+    .m_vh-40 {
+        height: 40vh;
+    }
+
+    .m_h-40px {
+        height: 40px;
+    }
+
+    .m_hm-40px {
+        max-height: 40px;
+    }
+
+    .m_h-50 {
+        height: 50%;
+    }
+
+    .m_vh-50 {
+        height: 50vh;
+    }
+
+    .m_h-50px {
+        height: 50px;
+    }
+
+    .m_hm-50px {
+        max-height: 50px;
+    }
+
+    .m_h-60 {
+        height: 60%;
+    }
+
+    .m_vh-60 {
+        height: 60vh;
+    }
+
+    .m_h-60px {
+        height: 60px;
+    }
+
+    .m_hm-60px {
+        max-height: 60px;
+    }
+
+    .m_h-70 {
+        height: 70%;
+    }
+
+    .m_vh-70 {
+        height: 70vh;
+    }
+
+    .m_h-70px {
+        height: 70px;
+    }
+
+    .m_hm-70px {
+        max-height: 70px;
+    }
+
+    .m_h-80 {
+        height: 80%;
+    }
+
+    .m_vh-80 {
+        height: 80vh;
+    }
+
+    .m_h-80px {
+        height: 80px;
+    }
+
+    .m_hm-80px {
+        max-height: 80px;
+    }
+
+    .m_h-90 {
+        height: 90%;
+    }
+
+    .m_vh-90 {
+        height: 90vh;
+    }
+
+    .m_h-90px {
+        height: 90px;
+    }
+
+    .m_hm-90px {
+        max-height: 90px;
+    }
+
+
+    .m_h-100 {
+        height: 100%;
+    }
+
+    .m_vh-100 {
+        height: 100vh;
+    }
+
+    .m_h-100px {
+        height: 100px;
+    }
+
+    .m_hm-100px {
+        max-height: 100px;
+    }
+
+    .m_h-150 {
+        height: 150%;
+    }
+
+    .m_vh-150 {
+        height: 150vh;
+    }
+
+    .m_h-150px {
+        height: 150px;
+    }
+
+    .m_hm-150px {
+        max-height: 150px;
+    }
+
+    .m_h-200 {
+        height: 200%;
+    }
+
+    .m_vh-200 {
+        height: 200vh;
+    }
+
+    .m_h-200px {
+        height: 200px;
+    }
+
+    .m_hm-200px {
+        max-height: 200px;
+    }
+
+    .m_h-300 {
+        height: 300%;
+    }
+
+    .m_vh-300 {
+        height: 300vh;
+    }
+
+    .m_h-300px {
+        height: 300px;
+    }
+
+    .m_hm-300px {
+        max-height: 300px;
+    }
+
+    .m_h-400 {
+        height: 400%;
+    }
+
+    .m_vh-400 {
+        height: 400vh;
+    }
+
+    .m_h-400px {
+        height: 400px;
+    }
+
+    .m_hm-400px {
+        max-height: 400px;
+    }
+
+    .m_h-500 {
+        height: 500%;
+    }
+
+    .m_vh-500 {
+        height: 500vh;
+    }
+
+    .m_h-500px {
+        height: 500px;
+    }
+
+    .m_hm-500px {
+        max-height: 500px;
+    }
+
+    .m_h-600 {
+        height: 600%;
+    }
+
+    .m_vh-600 {
+        height: 600vh;
+    }
+
+    .m_h-600px {
+        height: 600px;
+    }
+
+    .m_hm-600px {
+        max-height: 600px;
+    }
+
+
+    .m_layout-h-100 {
+        height: 100vh;
+        overflow-y: hidden;
+    }
+
+    .m_grid-wrap-1 {
+        grid-template-columns: repeat(1, 1fr);
+        height: max-content;
+    }
+
+    .m_grid-wrap-2 {
+        grid-template-columns: repeat(2, 1fr);
+        height: max-content;
+    }
+
+    .m_grid-wrap-3 {
+        grid-template-columns: repeat(3, 1fr);
+        height: max-content;
+    }
+
+    .m_grid-wrap-4 {
+        grid-template-columns: repeat(4, 1fr);
+        height: max-content;
+
+    }
+
+    .m_grid-wrap-5 {
+        grid-template-columns: repeat(5, 1fr);
+        height: max-content;
+    }
+
+    .m_grid-wrap-6 {
+        grid-template-columns: repeat(6, 1fr);
+        height: max-content;
+    }
+
+    .m_grid-wrap-7 {
+        grid-template-columns: repeat(7, 1fr);
+        height: max-content;
+    }
+
+    .m_grid-wrap-8 {
+        grid-template-columns: repeat(8, 1fr);
+        height: max-content;
+    }
+
+    .m_overflow-hidden {
+        overflow: hidden;
+    }
+
+    .m_overflow-x {
+        overflow-x: auto;
+    }
+
+    .m_overflow-y {
+        overflow-y: auto;
+    }
+
+    .m_overflow-x-hidden {
+        overflow-x: hidden;
+    }
+
+    .m_overflow-y-hidden {
+        overflow-y: hidden;
+    }
+}