cja-phoenix 1.2.16 → 1.2.18

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "cja-phoenix",
   "configKey": "cja-phoenix",
-  "version": "1.2.16",
+  "version": "1.2.18",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/scss/mixins/_index.scss

@@ -1,5 +1,6 @@
 @use "../variables" as *;
 
+@forward "media-queries";
 @forward "funnel";
 @forward "results";
 

package/dist/runtime/assets/scss/mixins/_media-queries.scss

@@ -0,0 +1,109 @@
+@use "../variables/breakpoints" as *;
+
+@mixin screen-xxs-max {
+  @media (max-width: $break-xxs-max) {
+    @content;
+  }
+}
+
+@mixin screen-xs-min {
+  @media (min-width: $break-xs-min) {
+    @content;
+  }
+}
+
+@mixin screen-xs-max {
+  @media (max-width: $break-xs-max) {
+    @content;
+  }
+}
+
+@mixin screen-xs-only {
+  @media (min-width: $break-xs-min) and (max-width: $break-xs-max) {
+    @content;
+  }
+}
+
+@mixin screen-sm-min {
+  @media (min-width: $break-sm-min) {
+    @content;
+  }
+}
+
+@mixin screen-sm-max {
+  @media (max-width: $break-sm-max) {
+    @content;
+  }
+}
+
+@mixin screen-sm-only {
+  @media (min-width: $break-sm-min) and (max-width: $break-sm-max) {
+    @content;
+  }
+}
+
+@mixin screen-md-min {
+  @media (min-width: $break-md-min) {
+    @content;
+  }
+}
+
+@mixin screen-md-max {
+  @media (max-width: $break-md-max) {
+    @content;
+  }
+}
+
+@mixin screen-md-only {
+  @media (min-width: $break-md-min) and (max-width: $break-md-max) {
+    @content;
+  }
+}
+
+@mixin screen-lg-min {
+  @media (min-width: $break-lg-min) {
+    @content;
+  }
+}
+
+@mixin screen-lg-max {
+  @media (max-width: $break-lg-max) {
+    @content;
+  }
+}
+
+@mixin screen-lg-only {
+  @media (min-width: $break-lg-min) and (max-width: $break-lg-max) {
+    @content;
+  }
+}
+
+@mixin screen-xl-min {
+  @media (min-width: $break-xl-min) {
+    @content;
+  }
+}
+
+@mixin screen-xl-max {
+  @media (max-width: $break-xl-max) {
+    @content;
+  }
+}
+
+@mixin screen-xl-only {
+  @media (min-width: $break-xl-min) and (max-width: $break-xl-max) {
+    @content;
+  }
+}
+
+@mixin screen-xxl-min {
+  @media (min-width: $break-xxl-min) {
+    @content;
+  }
+}
+
+@mixin screen-custom($min, $max) {
+  @media (min-width: $min) and (max-width: $max) {
+    @content;
+  }
+}

package/dist/runtime/assets/scss/mixins/_results.scss

@@ -17,7 +17,7 @@
       gap: 20px;
       box-shadow: $box-shadow-s;
 
-      @media screen and (min-width: $break-md-min) {
+      @include screen-md-min {
         grid-template-columns: 115px 1fr auto;
         padding: 24px 48px;
         gap: 48px;
@@ -59,7 +59,7 @@
       padding: 24px;
       overflow-y: auto;
 
-      @media screen and (min-width: $break-md-min) {
+      @include screen-md-min {
         padding: 24px 40px;
       }
 
@@ -84,7 +84,7 @@
             gap: 16px;
 
             &:not(.bordered):not(.highlight) {
-              @media screen and (min-width: $break-sm-min) {
+              @include screen-sm-min {
                 padding: 12px 16px;
                 border-radius: 8px;
                 border: 1px solid $light-grey;
@@ -225,7 +225,7 @@
       padding: 24px;
       box-shadow: $box-shadow-s;
 
-      @media screen and (min-width: $break-xs-min) {
+      @include screen-xs-min {
         justify-content: center;
         grid-template-columns: 200px;
       }

package/dist/runtime/components/Drawer.d.vue.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     defaultActive?: boolean;
-    type?: 'vertical-top' | 'vertical-bottom' | 'horizontal-left' | 'horizontal-right';
+    type?: "vertical-top" | "vertical-bottom" | "horizontal-left" | "horizontal-right";
     maxWidth?: {
         md?: string;
         lg?: string;

package/dist/runtime/components/Drawer.vue

@@ -14,7 +14,7 @@
         class="drawer-container"
         :class="[
   `drawer-${type}`,
-  { 'active': active, 'overlap-menu': overlapMenu }
+  { active, 'overlap-menu': overlapMenu }
 ]"
         :style="{ height, ...position, ...cssVars }"
       >
@@ -98,15 +98,15 @@ watch(active, () => {
     z-index: $level-modal;
   }
 
-  @media screen and (min-width: $break-md-min) {
+  @include screen-md-min {
     max-width: var(--md-max-width);
   }
 
-  @media screen and (min-width: $break-lg-min) {
+  @include screen-lg-min {
     max-width: var(--lg-max-width);
   }
 
-  @media screen and (min-width: $break-xl-min) {
+  @include screen-xl-min {
     max-width: var(--xl-max-width);
   }
 

package/dist/runtime/components/Drawer.vue.d.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     defaultActive?: boolean;
-    type?: 'vertical-top' | 'vertical-bottom' | 'horizontal-left' | 'horizontal-right';
+    type?: "vertical-top" | "vertical-bottom" | "horizontal-left" | "horizontal-right";
     maxWidth?: {
         md?: string;
         lg?: string;

package/dist/runtime/components/GridContainer.vue

@@ -12,21 +12,21 @@
   padding-left: $grid-side-padding-sm;
   padding-right: $grid-side-padding-sm;
 
-  @media screen and (min-width: $break-md-min) {
+  @include screen-md-min {
     grid-template-columns: $grid-columns-md;
     column-gap: $grid-column-gap-md;
     padding-left: $grid-side-padding-md;
     padding-right: $grid-side-padding-md;
   }
 
-  @media screen and (min-width: $break-lg-min) {
+  @include screen-lg-min {
     grid-template-columns: $grid-columns-lg;
     column-gap: $grid-column-gap-lg;
     padding-left: $grid-side-padding-lg;
     padding-right: $grid-side-padding-lg;
   }
 
-  @media screen and (min-width: $break-xl-min) {
+  @include screen-xl-min {
     padding-left: $grid-side-padding-xl;
     padding-right: $grid-side-padding-xl;
     max-width: 1440px;

package/dist/runtime/components/GridItem.d.vue.ts

@@ -1,4 +1,4 @@
-import type { GridItemOffsetDesktop, GridItemOffsetMobile, GridItemSizeDesktop, GridItemSizeMobile } from '../types/Grid.js';
+import type { GridItemOffsetDesktop, GridItemOffsetMobile, GridItemSizeDesktop, GridItemSizeMobile } from "../types/Grid.js";
 type __VLS_Props = {
     sizeSm?: GridItemSizeMobile;
     offsetSm?: GridItemOffsetMobile;

package/dist/runtime/components/GridItem.vue

@@ -31,7 +31,7 @@ defineProps({
 <style lang="scss" scoped>
 @for $i from 1 to 5 {
   .grid-item-sm-#{$i} {
-    @media screen and (max-width: $break-sm-max) {
+    @include screen-sm-max {
       grid-column-end: span #{$i};
     }
   }
@@ -45,7 +45,7 @@ defineProps({
 
 @for $i from 1 to 5 {
   .grid-item-md-#{$i} {
-    @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {
+    @include screen-md-only {
       grid-column-end: span #{$i};
     }
   }
@@ -53,7 +53,7 @@ defineProps({
 
 @for $i from 1 to 4 {
   .grid-item-md-offset-#{$i} {
-    @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {
+    @include screen-md-only {
       grid-column-start: #{$i + 1};
     }
   }
@@ -61,7 +61,7 @@ defineProps({
 
 @for $i from 1 to 13 {
   .grid-item-lg-#{$i} {
-    @media screen and (min-width: $break-lg-min) and (max-width: $break-lg-max) {
+    @include screen-lg-only {
       grid-column-end: span #{$i};
     }
   }
@@ -69,7 +69,7 @@ defineProps({
 
 @for $i from 1 to 12 {
   .grid-item-lg-offset-#{$i} {
-    @media screen and (min-width: $break-lg-min) and (max-width: $break-lg-max) {
+    @include screen-lg-only {
       grid-column-start: #{$i + 1};
     }
   }
@@ -77,7 +77,7 @@ defineProps({
 
 @for $i from 1 to 13 {
   .grid-item-xl-#{$i} {
-    @media screen and (min-width: $break-xl-min) {
+    @include screen-xl-min {
       grid-column-end: span #{$i};
     }
   }
@@ -85,7 +85,7 @@ defineProps({
 
 @for $i from 1 to 12 {
   .grid-item-xl-offset-#{$i} {
-    @media screen and (min-width: $break-xl-min) {
+    @include screen-xl-min {
       grid-column-start: #{$i + 1};
     }
   }

package/dist/runtime/components/GridItem.vue.d.ts

@@ -1,4 +1,4 @@
-import type { GridItemOffsetDesktop, GridItemOffsetMobile, GridItemSizeDesktop, GridItemSizeMobile } from '../types/Grid.js';
+import type { GridItemOffsetDesktop, GridItemOffsetMobile, GridItemSizeDesktop, GridItemSizeMobile } from "../types/Grid.js";
 type __VLS_Props = {
     sizeSm?: GridItemSizeMobile;
     offsetSm?: GridItemOffsetMobile;

package/dist/runtime/components/InfoMessage.d.vue.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     toggle?: boolean;
-    color: 'blue' | 'green' | 'red' | 'yellow' | 'dark-white';
+    color: "blue" | "green" | "red" | "yellow" | "dark-white";
     border?: boolean;
 };
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};

package/dist/runtime/components/InfoMessage.vue

@@ -9,23 +9,14 @@
   >
     <slot name="icon" />
     <div class="text-container">
-      <div
-        v-if="$slots.title"
-        class="title"
-      >
+      <div v-if="$slots.title" class="title">
         <slot name="title" />
       </div>
-      <div
-        v-if="$slots.description"
-        class="description"
-      >
+      <div v-if="$slots.description" class="description">
         <slot name="description" />
       </div>
     </div>
-    <div
-      v-if="toggle"
-      class="btn-container"
-    >
+    <div v-if="toggle" class="btn-container">
       <button
         class="m-cgg-icon--cross"
         aria-label="Fechar"
@@ -55,7 +46,7 @@ defineEmits(["btn:close"]);
   padding: 8px 16px;
   border-radius: 8px;
 
-  @media screen and (min-width: $break-md-min) {
+  @include screen-md-min {
     padding: 12px 16px;
   }
 

package/dist/runtime/components/InfoMessage.vue.d.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     toggle?: boolean;
-    color: 'blue' | 'green' | 'red' | 'yellow' | 'dark-white';
+    color: "blue" | "green" | "red" | "yellow" | "dark-white";
     border?: boolean;
 };
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};

package/dist/runtime/components/Modal.vue

@@ -86,7 +86,7 @@ defineExpose({ active, openModal, closeModal, toggleModal });
   align-items: flex-end;
   z-index: $level-modal;
 
-  @media screen and (min-width: $break-md-min) {
+  @include screen-md-min {
     justify-content: center;
     align-items: center;
     padding: 24px;
@@ -102,16 +102,16 @@ defineExpose({ active, openModal, closeModal, toggleModal });
     max-height: 100%;
     transition: 0.4s ease-in-out;
 
-    @media screen and (min-width: $break-md-min) {
+    @include screen-md-min {
       border-radius: 16px;
       max-width: min(100%, var(--md-max-width, 768px));
     }
 
-    @media screen and (min-width: $break-lg-min) {
+    @include screen-lg-min {
       max-width: min(100%, var(--lg-max-width, var(--md-max-width, 1024px)));
     }
 
-    @media screen and (min-width: $break-xl-min) {
+    @include screen-xl-min {
       max-width: min(
         100%,
         var(--xl-max-width, var(--lg-max-width, var(--md-max-width, 1024px)))
@@ -119,7 +119,7 @@ defineExpose({ active, openModal, closeModal, toggleModal });
     }
 
     &.mobile-full {
-      @media screen and (max-width: $break-sm-max) {
+      @include screen-sm-max {
         height: 100%;
         border-radius: 0;
         transition: none;
@@ -177,7 +177,7 @@ defineExpose({ active, openModal, closeModal, toggleModal });
 }
 
 .modal-enter-from .modal-container {
-  @media screen and (max-width: $break-sm-max) {
+  @include screen-sm-max {
     transform: translateY(100%);
   }
 }
@@ -188,7 +188,7 @@ defineExpose({ active, openModal, closeModal, toggleModal });
 }
 
 .modal-enter-to .modal-container {
-  @media screen and (max-width: $break-sm-max) {
+  @include screen-sm-max {
     transform: translateY(0);
   }
 }

package/dist/runtime/components/form/RadioInputList.d.vue.ts

@@ -1,20 +1,20 @@
-import { type InputHTMLAttributes } from 'vue';
-import type { RadioOption } from '../../types/Form.js';
-import type { Lazy, Schema } from 'yup';
+import { type InputHTMLAttributes } from "vue";
+import type { RadioOption } from "../../types/Form.js";
+import type { Lazy, Schema } from "yup";
 type __VLS_Props = {
     title?: string;
     tooltip?: string;
-    layout?: 'vertical' | 'horizontal';
-    listLayout?: 'vertical' | 'horizontal';
-    size?: 'sm' | 'md' | 'lg';
+    layout?: "vertical" | "horizontal";
+    listLayout?: "vertical" | "horizontal";
+    size?: "sm" | "md" | "lg";
     validation?: Schema | Lazy<any>;
-    validationMode?: 'change' | 'none';
+    validationMode?: "change" | "none";
     errorDisplay?: boolean;
-    disabled?: InputHTMLAttributes['disabled'];
+    disabled?: InputHTMLAttributes["disabled"];
     options: RadioOption[] | undefined;
     name: string;
     radioStyle?: {
-        variant: 'default' | 'button';
+        variant: "default" | "button";
         breakDisplay?: {
             xs?: number;
             sm?: number;
@@ -25,7 +25,7 @@ type __VLS_Props = {
     };
 };
 type __VLS_ModelProps = {
-    modelValue: InputHTMLAttributes['value'];
+    modelValue: InputHTMLAttributes["value"];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {

package/dist/runtime/components/form/RadioInputList.vue

@@ -17,10 +17,7 @@
 ]"
       :style="cssVars"
     >
-      <li
-        v-for="option in options"
-        :key="option.value"
-      >
+      <li v-for="option in options" :key="option.value">
         <FormRadioInput
           v-bind="{
   ...option,
@@ -95,19 +92,19 @@ defineExpose({ errorMessage, meta, validate });
     gap: 12px;
     grid-template-columns: repeat(var(--xs-columns), 1fr);
 
-    @media screen and (min-width: $break-xs-min) {
+    @include screen-xs-min {
       grid-template-columns: repeat(var(--sm-columns), 1fr);
     }
 
-    @media screen and (min-width: $break-md-min) {
+    @include screen-md-min {
       grid-template-columns: repeat(var(--md-columns), 1fr);
     }
 
-    @media screen and (min-width: $break-lg-min) {
+    @include screen-lg-min {
       grid-template-columns: repeat(var(--lg-columns), 1fr);
     }
 
-    @media screen and (min-width: $break-xl-min) {
+    @include screen-xl-min {
       grid-template-columns: repeat(var(--xl-columns), 1fr);
     }
   }

package/dist/runtime/components/form/RadioInputList.vue.d.ts

@@ -1,20 +1,20 @@
-import { type InputHTMLAttributes } from 'vue';
-import type { RadioOption } from '../../types/Form.js';
-import type { Lazy, Schema } from 'yup';
+import { type InputHTMLAttributes } from "vue";
+import type { RadioOption } from "../../types/Form.js";
+import type { Lazy, Schema } from "yup";
 type __VLS_Props = {
     title?: string;
     tooltip?: string;
-    layout?: 'vertical' | 'horizontal';
-    listLayout?: 'vertical' | 'horizontal';
-    size?: 'sm' | 'md' | 'lg';
+    layout?: "vertical" | "horizontal";
+    listLayout?: "vertical" | "horizontal";
+    size?: "sm" | "md" | "lg";
     validation?: Schema | Lazy<any>;
-    validationMode?: 'change' | 'none';
+    validationMode?: "change" | "none";
     errorDisplay?: boolean;
-    disabled?: InputHTMLAttributes['disabled'];
+    disabled?: InputHTMLAttributes["disabled"];
     options: RadioOption[] | undefined;
     name: string;
     radioStyle?: {
-        variant: 'default' | 'button';
+        variant: "default" | "button";
         breakDisplay?: {
             xs?: number;
             sm?: number;
@@ -25,7 +25,7 @@ type __VLS_Props = {
     };
 };
 type __VLS_ModelProps = {
-    modelValue: InputHTMLAttributes['value'];
+    modelValue: InputHTMLAttributes["value"];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {

package/dist/runtime/components/form/SelectionTiles.d.vue.ts

@@ -1,10 +1,10 @@
-import type { Icon } from '../../types/Icon.js';
-import type { TileOption } from '../../types/Form.js';
-import type { Lazy, Schema } from 'yup';
+import type { Icon } from "../../types/Icon.js";
+import type { TileOption } from "../../types/Form.js";
+import type { Lazy, Schema } from "yup";
 type __VLS_Props = {
     name: string;
     icon?: Icon;
-    layout?: 'list' | 'grid' | 'image';
+    layout?: "list" | "grid" | "image";
     options?: TileOption[];
     gridColumns?: {
         xs?: string;
@@ -13,10 +13,10 @@ type __VLS_Props = {
         lg?: string;
         xl?: string;
     };
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     multiselect?: boolean;
     validation?: Schema | Lazy<any>;
-    validationMode?: 'change' | 'none';
+    validationMode?: "change" | "none";
     errorDisplay?: boolean;
 };
 type __VLS_ModelProps = {

package/dist/runtime/components/form/SelectionTiles.vue

@@ -12,7 +12,7 @@
         v-tippy="option.tooltip ? { content: option.tooltip } : void 0"
         class="tile"
         :class="{
-  'active': props.multiselect ? model.includes(option.value) : option.value == value,
+  active: props.multiselect ? model.includes(option.value) : option.value == value,
   'has-image': option.image
 }"
         @click="handleChange(option.value)"
@@ -25,16 +25,10 @@
 "
           :aria-label="option.label"
           v-bind="{ name }"
-        >
+        />
 
-        <div
-          v-if="option.image"
-          class="image-container"
-        >
-          <img
-            :src="option.image"
-            :alt="option.label"
-          >
+        <div v-if="option.image" class="image-container">
+          <img :src="option.image" :alt="option.label" />
         </div>
 
         <div
@@ -43,10 +37,7 @@
         >
           <div class="upper-text">
             <span class="title">{{ option.label }}</span>
-            <span
-              v-if="option.description"
-              class="description"
-            >
+            <span v-if="option.description" class="description">
               {{ option.description }}
             </span>
           </div>
@@ -57,10 +48,7 @@
           />
         </div>
 
-        <span
-          v-if="layout == 'list' && icon"
-          :class="[icon, 'icon']"
-        />
+        <span v-if="layout == 'list' && icon" :class="[icon, 'icon']" />
       </div>
     </div>
     <FormStructureError
@@ -271,19 +259,19 @@ const emit = defineEmits(["click:option"]);
   &.layout-image {
     grid-template-columns: var(--xs-grid-columns);
 
-    @media screen and (min-width: $break-xs-min) {
+    @include screen-xs-min {
       grid-template-columns: var(--sm-grid-columns);
     }
 
-    @media screen and (min-width: $break-md-min) {
+    @include screen-md-min {
       grid-template-columns: var(--md-grid-columns);
     }
 
-    @media screen and (min-width: $break-lg-min) {
+    @include screen-lg-min {
       grid-template-columns: var(--lg-grid-columns);
     }
 
-    @media screen and (min-width: $break-xl-min) {
+    @include screen-xl-min {
       grid-template-columns: var(--xl-grid-columns);
     }
   }

package/dist/runtime/components/form/SelectionTiles.vue.d.ts

@@ -1,10 +1,10 @@
-import type { Icon } from '../../types/Icon.js';
-import type { TileOption } from '../../types/Form.js';
-import type { Lazy, Schema } from 'yup';
+import type { Icon } from "../../types/Icon.js";
+import type { TileOption } from "../../types/Form.js";
+import type { Lazy, Schema } from "yup";
 type __VLS_Props = {
     name: string;
     icon?: Icon;
-    layout?: 'list' | 'grid' | 'image';
+    layout?: "list" | "grid" | "image";
     options?: TileOption[];
     gridColumns?: {
         xs?: string;
@@ -13,10 +13,10 @@ type __VLS_Props = {
         lg?: string;
         xl?: string;
     };
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     multiselect?: boolean;
     validation?: Schema | Lazy<any>;
-    validationMode?: 'change' | 'none';
+    validationMode?: "change" | "none";
     errorDisplay?: boolean;
 };
 type __VLS_ModelProps = {

package/dist/runtime/components/form/structure/Title.d.vue.ts

@@ -1,9 +1,9 @@
-import type { InputHTMLAttributes } from 'vue';
+import type { InputHTMLAttributes } from "vue";
 type __VLS_Props = {
     title: string;
     tooltip?: string;
-    disabled?: InputHTMLAttributes['disabled'];
-    size?: 'sm' | 'md' | 'lg';
+    disabled?: InputHTMLAttributes["disabled"];
+    size?: "sm" | "md" | "lg";
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: "sm" | "md" | "lg";

package/dist/runtime/components/form/structure/Title.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    v-if="title"
-    class="input-title"
-    :class="[`size-${size}`, { disabled }]"
-  >
+  <div v-if="title" class="input-title" :class="[`size-${size}`, { disabled }]">
     <span>{{ title }}</span>
     <span
       v-if="tooltip"
@@ -35,7 +31,7 @@ defineProps({
     font-size: 18px;
     color: $main-blue;
 
-    @media screen and (min-width: $break-md-min) {
+    @include screen-md-min {
       font-size: 20px;
     }
   }

package/dist/runtime/components/form/structure/Title.vue.d.ts

@@ -1,9 +1,9 @@
-import type { InputHTMLAttributes } from 'vue';
+import type { InputHTMLAttributes } from "vue";
 type __VLS_Props = {
     title: string;
     tooltip?: string;
-    disabled?: InputHTMLAttributes['disabled'];
-    size?: 'sm' | 'md' | 'lg';
+    disabled?: InputHTMLAttributes["disabled"];
+    size?: "sm" | "md" | "lg";
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: "sm" | "md" | "lg";

package/dist/runtime/components/funnel/Header.vue

@@ -23,11 +23,13 @@ defineProps({
 
 <style lang="scss" scoped>
 .funnel-header {
+  display: grid;
+  gap: 16px;
+  margin-bottom: 32px;
   text-align: center;
-  margin: 0 0 32px;
 
   .header-container {
-    display: flex;
+    display: grid;
     gap: 12px;
     justify-content: center;
     align-items: center;
@@ -45,21 +47,16 @@ defineProps({
     font-weight: 700;
     margin: 0;
 
-    @media screen and (min-width: $break-lg-min) {
+    @include screen-lg-min {
       font-size: 24px;
       line-height: 30px;
     }
   }
 
   p {
-    font-size: 14px;
-    line-height: 18px;
-    margin: 24px 0 0;
-
-    @media screen and (min-width: $break-lg-min) {
-      font-size: 16px;
-      line-height: 20px;
-    }
+    font-size: 16px;
+    line-height: 20px;
+    margin: 0;
   }
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cja-phoenix",
-  "version": "1.2.16",
+  "version": "1.2.18",
   "description": "Phoenix utility",
   "repository": "comparaja/phoenix",
   "license": "MIT",