@axos-web-dev/shared-components 0.0.16 → 0.0.18

package/dist/Table/Table.css.d.ts

@@ -1,4 +1,14 @@
-export declare const table_container: string;
+export declare const table_container: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        apy: {
+            background: "#f4f4f4";
+            padding: "2rem 0";
+        };
+        standard: {
+            background: "white";
+        };
+    };
+}>;
 export declare const table_container_text: string;
 export declare const table_headline: string;
 export declare const highlight_first_row: string;
@@ -6,7 +16,7 @@ export declare const highlight_last_row: string;
 export declare const headerCell: string;
 export declare const headerVariants: Record<"primary" | "secondary" | "tertiary" | "quaternary", string>;
 export declare const bodyHeader: string;
-export declare const th: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const th: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             color: "#4A5560";
@@ -59,7 +69,7 @@ export declare const th: import("@vanilla-extract/recipes").RuntimeFn<{
         true: {};
     };
 }>;
-export declare const td: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const td: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -114,7 +124,7 @@ export declare const td: import("@vanilla-extract/recipes").RuntimeFn<{
         true: {};
     };
 }>;
-export declare const tableWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const tableWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
@@ -130,7 +140,7 @@ export declare const tableWrapper: import("@vanilla-extract/recipes").RuntimeFn<
         };
     };
 }>;
-export declare const table: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const table: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -147,3 +157,4 @@ export declare const table: import("@vanilla-extract/recipes").RuntimeFn<{
     };
 }>;
 export declare const alternate_color_rows: string;
+export declare const apy_table: string;

package/dist/Table/Table.css.js

@@ -2,21 +2,23 @@
 /* empty css                                   */
 /* empty css                         */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var table_container = "_1nivbwe0";
-var table_container_text = "_1nivbwe1";
-var table_headline = "_1nivbwe2";
-var highlight_first_row = "_1nivbwe3";
-var highlight_last_row = "_1nivbwe4";
-var headerCell = "_1nivbwe5";
-var headerVariants = { primary: "_1nivbwe6 _1nivbwe5", secondary: "_1nivbwe7 _1nivbwe5", tertiary: "_1nivbwe8 _1nivbwe5", quaternary: "_1nivbwe9 _1nivbwe5" };
-var bodyHeader = "_1nivbwea";
-var th = createRuntimeFn({ defaultClassName: "_1nivbweb", variantClassNames: { variant: { primary: "_1nivbwec", secondary: "_1nivbwed", tertiary: "_1nivbwee", quaternary: "_1nivbwef" }, highlighted: { true: "_1nivbweg" } }, defaultVariants: {}, compoundVariants: [] });
-var td = createRuntimeFn({ defaultClassName: "_1nivbweh", variantClassNames: { variant: { primary: "_1nivbwei", secondary: "_1nivbwej", tertiary: "_1nivbwek", quaternary: "_1nivbwel" }, highlighted: { true: "_1nivbwem" } }, defaultVariants: {}, compoundVariants: [[{ highlighted: true, variant: "primary" }, "_1nivbwen"], [{ highlighted: true, variant: "tertiary" }, "_1nivbweo"]] });
-var tableWrapper = createRuntimeFn({ defaultClassName: "_1nivbwep", variantClassNames: { variant: { primary: "_1nivbweq", secondary: "_1nivbwer", tertiary: "_1nivbwes", quaternary: "_1nivbwet" } }, defaultVariants: {}, compoundVariants: [] });
-var table = createRuntimeFn({ defaultClassName: "_1nivbweu", variantClassNames: { variant: { primary: "_1nivbwev", secondary: "_1nivbwew", tertiary: "_1nivbwex", quaternary: "_1nivbwey" } }, defaultVariants: {}, compoundVariants: [] });
-var alternate_color_rows = "_1nivbwez";
+var table_container = createRuntimeFn({ defaultClassName: "_1nivbwe0", variantClassNames: { variant: { apy: "_1nivbwe1", standard: "_1nivbwe2" } }, defaultVariants: {}, compoundVariants: [] });
+var table_container_text = "_1nivbwe3";
+var table_headline = "_1nivbwe4";
+var highlight_first_row = "_1nivbwe5";
+var highlight_last_row = "_1nivbwe6";
+var headerCell = "_1nivbwe7";
+var headerVariants = { primary: "_1nivbwe8 _1nivbwe7", secondary: "_1nivbwe9 _1nivbwe7", tertiary: "_1nivbwea _1nivbwe7", quaternary: "_1nivbweb _1nivbwe7" };
+var bodyHeader = "_1nivbwec";
+var th = createRuntimeFn({ defaultClassName: "_1nivbwed", variantClassNames: { variant: { primary: "_1nivbwee", secondary: "_1nivbwef", tertiary: "_1nivbweg", quaternary: "_1nivbweh" }, highlighted: { true: "_1nivbwei" } }, defaultVariants: {}, compoundVariants: [] });
+var td = createRuntimeFn({ defaultClassName: "_1nivbwej", variantClassNames: { variant: { primary: "_1nivbwek", secondary: "_1nivbwel", tertiary: "_1nivbwem", quaternary: "_1nivbwen" }, highlighted: { true: "_1nivbweo" } }, defaultVariants: {}, compoundVariants: [[{ highlighted: true, variant: "primary" }, "_1nivbwep"], [{ highlighted: true, variant: "tertiary" }, "_1nivbweq"]] });
+var tableWrapper = createRuntimeFn({ defaultClassName: "_1nivbwer", variantClassNames: { variant: { primary: "_1nivbwes", secondary: "_1nivbwet", tertiary: "_1nivbweu", quaternary: "_1nivbwev" } }, defaultVariants: {}, compoundVariants: [] });
+var table = createRuntimeFn({ defaultClassName: "_1nivbwew", variantClassNames: { variant: { primary: "_1nivbwex", secondary: "_1nivbwey", tertiary: "_1nivbwez", quaternary: "_1nivbwe10" } }, defaultVariants: {}, compoundVariants: [] });
+var alternate_color_rows = "_1nivbwe11";
+var apy_table = "_1nivbwe12";
 export {
   alternate_color_rows,
+  apy_table,
   bodyHeader,
   headerCell,
   headerVariants,

package/dist/Table/Table.d.ts

@@ -1,11 +1,12 @@
-import { PropsWithChildren } from "react";
-import { CellProps, RowProps, TableContainerProps, TableProps } from "./Table.interface";
-export declare const TableContainer: ({ tableTitle, tableBody, tableFooter, }: TableContainerProps) => import("react/jsx-runtime").JSX.Element;
+import { CellProps, RowProps, TableContainerProps, TableProps } from './Table.interface';
+import { PropsWithChildren } from 'react';
+
+export declare const TableContainer: ({ tableTitle, tableBody, tableFooter, tableType, }: TableContainerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Table: ({ variant, children, highlight, tableType, alternateColorRows, }: TableProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableRow: ({ children, ...props }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableHead: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export declare const TableBody: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-export declare const TableCell: ({ children, as, variant, highlighted, ...props }: CellProps) => import("react").DetailedReactHTMLElement<{
+export declare const TableCell: ({ children, as, variant, highlighted, ...props }: CellProps) => import('react').DetailedReactHTMLElement<{
     className: string;
     manifest?: string | undefined;
     defaultChecked?: boolean | undefined;

package/dist/Table/Table.interface.d.ts

@@ -1,4 +1,5 @@
-import { HtmlHTMLAttributes, PropsWithChildren, ReactNode } from "react";
+import { HtmlHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+
 export interface RowProps extends HtmlHTMLAttributes<HTMLTableRowElement>, PropsWithChildren {
 }
 export interface CellProps extends HtmlHTMLAttributes<HTMLTableCellElement>, PropsWithChildren {
@@ -17,4 +18,5 @@ export interface TableContainerProps extends PropsWithChildren {
     tableTitle: ReactNode | string;
     tableBody?: ReactNode | string;
     tableFooter: ReactNode | string;
+    tableType?: string;
 }

package/dist/Table/Table.js

@@ -2,38 +2,56 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { createElement } from "react";
-import { table_container, table_container_text, table_headline, tableWrapper, table, highlight_first_row, highlight_last_row, alternate_color_rows, td, th } from "./Table.css.js";
+import { table_container, table_container_text, table_headline, tableWrapper, table, highlight_first_row, highlight_last_row, alternate_color_rows, apy_table, td, th } from "./Table.css.js";
 const TableContainer = ({
   tableTitle,
   tableBody,
-  tableFooter
+  tableFooter,
+  tableType = "Standard"
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: clsx(table_container, "containment", "section_spacer"), children: [
-    tableTitle && /* @__PURE__ */ jsx("div", { className: table_container_text, children: /* @__PURE__ */ jsx("h1", { className: clsx("header_1", table_headline), children: tableTitle }) }),
-    tableBody,
-    tableFooter && /* @__PURE__ */ jsx("div", { className: clsx(table_container_text, "push_up_24"), children: tableFooter })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        tableType === "Rate" ? table_container({ variant: "apy" }) : table_container({ variant: "standard" }),
+        "containment"
+      ),
+      children: [
+        tableTitle && /* @__PURE__ */ jsx("div", { className: table_container_text, children: /* @__PURE__ */ jsx("h1", { className: clsx("header_1", table_headline), children: tableTitle }) }),
+        tableBody,
+        tableFooter && /* @__PURE__ */ jsx("div", { className: clsx(table_container_text, "push_up_24"), children: tableFooter })
+      ]
+    }
+  );
 };
 const Table = ({
   variant = "primary",
   children,
   highlight,
-  tableType,
+  tableType = "Standard",
   alternateColorRows = false
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: tableWrapper({ variant: getVariant(variant) }), children: /* @__PURE__ */ jsx(
-    "table",
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      className: clsx(
-        table({ variant: getVariant(variant) }),
-        highlight === "First Row" && highlight_first_row,
-        highlight === "Last Row" && highlight_last_row,
-        highlight === "First and Last Row" && `${highlight_first_row} ${highlight_last_row}`,
-        alternateColorRows || tableType === "Rate" ? alternate_color_rows : ""
-      ),
-      children
+      className: tableWrapper({ variant: getVariant(variant) }),
+      style: tableType === "Rate" ? { width: "90%", border: "none" } : {},
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          className: clsx(
+            table({ variant: getVariant(variant) }),
+            highlight === "First Row" && highlight_first_row,
+            highlight === "Last Row" && highlight_last_row,
+            highlight === "First and Last Row" && `${highlight_first_row} ${highlight_last_row}`,
+            alternateColorRows || tableType === "Rate" ? alternate_color_rows : "",
+            tableType === "Rate" ? apy_table : ""
+          ),
+          children
+        }
+      )
     }
-  ) });
+  );
 };
 const TableRow = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx("tr", { ...props, children });

package/dist/Table/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Table";
-export * from "./Table.css";
+export * from './Table';
+export * from './Table.css';

package/dist/Table/index.js

@@ -1,5 +1,5 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "./Table.js";
-import { alternate_color_rows, bodyHeader, headerCell, headerVariants, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_headline, td, th } from "./Table.css.js";
+import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_headline, td, th } from "./Table.css.js";
 export {
   Table,
   TableBody,
@@ -8,6 +8,7 @@ export {
   TableHead,
   TableRow,
   alternate_color_rows,
+  apy_table,
   bodyHeader,
   headerCell,
   headerVariants,

package/dist/TextBlock/TextBlock.d.ts

@@ -1,4 +1,5 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
+
 export interface TextBlockProps {
     bodyCopy: ReactNode | string;
     headline: ReactNode | string;

package/dist/TextBlock/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./TextBlock";
-export * from "./TextBlock.css";
+export * from './TextBlock';
+export * from './TextBlock.css';

package/dist/Typography/Typography.css.d.ts

@@ -1,4 +1,5 @@
-import { RecipeVariants } from "@vanilla-extract/recipes";
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
 /**
  * Encode font
  */
@@ -8,7 +9,7 @@ export declare const headerCssVariable = "var(--header-font-family)";
  */
 export declare const mainCssVariable = "var(--main-font-family)";
 export declare const header: string;
-export declare const sizes: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const sizes: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         xs: {
             fontSize: number;
@@ -30,7 +31,7 @@ export declare const sizes: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const typography: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const typography: import('@vanilla-extract/recipes').RuntimeFn<{
     type: {
         h1: {
             fontFamily: "var(--header-font-family)";

package/dist/Typography/Typography.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
-import { TypographySizeVariants, TypographyVariants } from ".";
+import { TypographySizeVariants, TypographyVariants } from '.';
+import { default as React } from 'react';
+
 type AsType = "body1" | "body2" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | string;
 export interface Props extends React.PropsWithChildren {
     as?: AsType;

package/dist/Typography/index.d.ts

@@ -1 +1 @@
-export * from "./Typography.css";
+export * from './Typography.css';

package/dist/VideoTile/VideoTile.d.ts

@@ -1,3 +1,4 @@
-import { FC } from "react";
-import { VideoTileInterface } from "./VideoTile.interface";
+import { VideoTileInterface } from './VideoTile.interface';
+import { FC } from 'react';
+
 export declare const VideoTile: FC<VideoTileInterface>;

package/dist/VideoTile/VideoTile.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgChevronDown from "../icons/ChevronDown.js";
 import SvgChevronUp from "../icons/ChevronUp.js";
@@ -9,7 +10,7 @@ import SvgChevronUp from "../icons/ChevronUp.js";
 import ReactMarkdown from "react-markdown";
 import { useToggle } from "react-use";
 import { VideoInit } from "./VideoInit.js";
-import { video_container, w_100, mb_8, video_title, vidyard_height, transcript_container, toggle_container, transcript_btn, expand_icon, transcript_content, show, hide_transcript } from "./VideoTile.css.js";
+import { video_container, mb_8, video_title, vidyard_height, transcript_container, toggle_container, transcript_btn, expand_icon, transcript_content, show, hide_transcript } from "./VideoTile.css.js";
 const VideoTile = ({
   //   ariaLabel,
   title,
@@ -28,7 +29,7 @@ const VideoTile = ({
   };
   return /* @__PURE__ */ jsxs("div", { id: `id_${id}`, className: `flex center`, children: [
     /* @__PURE__ */ jsx(VideoInit, {}),
-    /* @__PURE__ */ jsxs("div", { className: `${video_container} ${w_100} flex flex_col`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `containment ${video_container} flex flex_col`, children: [
       title && /* @__PURE__ */ jsx("h2", { className: `${mb_8} ${video_title}`, children: title }),
       /* @__PURE__ */ jsx(
         "div",

package/dist/VideoTile/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./VideoInit";
-export * from "./VideoTile";
-export * from "./VideoTile.css";
-export * from "./VideoTile.interface";
+export * from './VideoInit';
+export * from './VideoTile';
+export * from './VideoTile.css';
+export * from './VideoTile.interface';

package/dist/VideoWrapper/index.d.ts

@@ -1,5 +1,6 @@
-import { FC } from "react";
-import { VideoTileInterface } from "../VideoTile";
+import { VideoTileInterface } from '../VideoTile';
+import { FC } from 'react';
+
 export interface VideoWrapperProps {
     videoTiles: VideoTileInterface[];
     backgroundColor?: string;

package/dist/VideoWrapper/index.js

@@ -17,6 +17,7 @@ const VideoWrapper = ({
     {
       id: `id_${id}`,
       style: backgroundColor ? { backgroundColor } : {},
+      className: "containment",
       children: /* @__PURE__ */ jsxs("section", { children: [
         /* @__PURE__ */ jsx("div", { className: "section_header", children: /* @__PURE__ */ jsx("h2", { className: "header_1", children: title }) }),
         /* @__PURE__ */ jsx("div", { className: `${videoTiles.length % 3 === 0 ? grid_3 : grid_2}`, children: videoTiles == null ? void 0 : videoTiles.map((videoItem, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(

package/dist/assets/Forms/Forms.css

@@ -1,5 +1,4 @@
 .tfms6a0 {
-  width: 100%;
   padding-inline: 120px;
   padding-top: 48px;
   padding-bottom: 48px;
@@ -87,6 +86,7 @@
 }
 .tfms6am {
   max-width: 860px;
+  margin-inline: auto;
 }
 @media screen and (max-width:1023px) {
   .tfms6a0 {

package/dist/assets/HeroBanner/HeroBanner.css

@@ -1,153 +1,202 @@
-._1ye8k3f0 {
+._1ye8k3f1 {
   position: relative;
   overflow: hidden;
   isolation: isolate;
 }
-._1ye8k3f1 {
+._1ye8k3f2 {
   background: var(--_1073cm81);
   color: var(--_1073cm82);
 }
-._1ye8k3f2 {
+._1ye8k3f3 {
   background: var(--_1073cm88);
   color: var(--_1073cm89);
 }
-._1ye8k3f3 {
+._1ye8k3f4 {
   background: var(--_1073cm8f);
   color: var(--_1073cm8g);
 }
-._1ye8k3f4 {
+._1ye8k3f5 {
   background: var(--_1073cm8m);
   color: var(--_1073cm8n);
 }
-._1ye8k3f5 {
+._1ye8k3f6 {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  min-height: 480px;
-  gap: 2rem;
 }
-._1ye8k3f7 {
+._1ye8k3f8 {
   padding: 2rem 0;
 }
-._1ye8k3f8 {
+._1ye8k3fa {
   display: flex;
   justify-content: flex-end;
+  max-width: 600px;
 }
-._1ye8k3f8 img {
-  max-width: 663px;
+._1ye8k3fa img {
+  max-width: 604px;
+  max-height: 510px;
   object-fit: cover;
   aspect-ratio: 1 / 1;
-  max-height: 480px;
 }
-._1ye8k3fa {
+._1ye8k3fb {
   display: block;
   font: 700 14px / 1.3 var(--main-font-family);
   margin-bottom: 2px;
   letter-spacing: .2px;
 }
-._1ye8k3fb {
+._1ye8k3fc {
   background: var(--_1073cm84);
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-._1ye8k3fc {
+._1ye8k3fd {
   background: var(--_1073cm8b);
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-._1ye8k3fd {
+._1ye8k3fe {
   color: var(--_1073cm8k);
 }
-._1ye8k3fe {
+._1ye8k3ff {
   color: var(--_1073cm8n);
 }
-._1ye8k3ff {
-  margin-bottom: 1.5rem;
+._1ye8k3fg {
   font: 600 2.5rem / 1.25 var(--header-font-family);
 }
-._1ye8k3fg {
+._1ye8k3fh {
   background: var(--_1073cm84);
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-._1ye8k3fh {
+._1ye8k3fi {
   background: var(--_1073cm8b);
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-._1ye8k3fi {
+._1ye8k3fj {
   color: var(--_1073cm8h);
 }
-._1ye8k3fj {
+._1ye8k3fk {
   color: var(--_1073cm8o);
 }
-._1ye8k3f7 p {
+._1ye8k3f8 p {
   font: 400 18px / 1.44 var(--main-font-family);
   letter-spacing: .2px;
 }
-._1ye8k3fk {
+._1ye8k3fl {
   margin-top: 3.5rem;
   display: flex;
   align-items: center;
   gap: 2rem;
 }
+._1ye8k3fl:empty {
+  display: none;
+}
+._1ye8k3f0 ._1ye8k3fl > *:nth-child(2) {
+  margin-top: 1.5rem;
+  margin-left: 0;
+}
+@media screen and (max-width:1280px) {
+  ._1ye8k3fl {
+    margin-top: 2.5rem;
+  }
+  ._1ye8k3f0 ._1ye8k3fl {
+    flex-direction: column;
+  }
+}
+@media (max-width: 1280px) and (min-width: 1024px) {
+  ._1ye8k3f0 ._1ye8k3f9 {
+    width: calc(100%-28px);
+  }
+  ._1ye8k3fa img {
+    aspect-ratio: 1 / 1;
+  }
+  ._1ye8k3f0 ._1ye8k3fl {
+    align-items: flex-start;
+  }
+}
 @media screen and (max-width:1024px) {
-  ._1ye8k3f5 {
+  ._1ye8k3f6 {
     flex-direction: column;
   }
-  ._1ye8k3fk {
+  ._1ye8k3fl {
     flex-direction: column;
   }
 }
-@media screen and (min-width:1024px) {
+@media (max-width: 1023px) {
+  ._1ye8k3fa {
+    justify-content: center;
+    width: min(375px,100%);
+  }
+  ._1ye8k3fa img {
+    max-width: 100%;
+  }
+}
+@media (min-width: 1024px) {
   ._1ye8k3f6 {
-    flex-direction: row-reverse;
+    gap: 2rem;
+    min-height: 480px;
   }
+  ._1ye8k3f0 ._1ye8k3f6 {
+    min-height: 740px;
+    gap: 1.5rem;
+  }
+  ._1ye8k3fa {
+    _1ye8k3f0 & {
+      max-width: 708px;
+    }
+  }
+}
+@media screen and (min-width:1024px) {
   ._1ye8k3f7 {
+    flex-direction: row-reverse;
+  }
+  ._1ye8k3f8 {
     flex: 1 1;
     max-width: 588px;
   }
+  ._1ye8k3f0 ._1ye8k3f8 {
+    max-width: 468px;
+  }
 }
 @media screen and (max-width:1023px) {
-  ._1ye8k3f7 {
-    text-align: center;
-  }
   ._1ye8k3f8 {
-    justify-content: center;
-    width: min(375px, 100%);
+    text-align: center;
   }
 }
 @media screen and (max-width:603px) {
-  ._1ye8k3f7 {
+  ._1ye8k3f8 {
     max-width: calc(100% - 2rem);
     margin-left: auto;
     margin-right: auto;
   }
 }
-@media (max-width:1280px) and (min-width:1024px) {
-  ._1ye8k3f8:not(._1ye8k3f9 ._1ye8k3f8) {
-    flex: 1 1;
-  }
-  ._1ye8k3f5:not(._1ye8k3f9 ._1ye8k3f5) > * {
-    max-width: 50%;
-    width: 50%;
-  }
-}
-@media screen and (max-width:1280px) {
-  ._1ye8k3fk {
-    margin-top: 2.5rem;
+@media (max-width: 603px) {
+  ._1ye8k3f9 {
+    width: 100%;
+    max-width: 100%;
   }
 }
 @media screen and (max-width:768px) {
-  ._1ye8k3ff {
+  ._1ye8k3fg {
     font-size: 28px;
     line-height: 1.29;
   }
-  ._1ye8k3f7 p {
+  ._1ye8k3f8 p {
     font-size: 1rem;
     line-height: 1.5;
   }
-  ._1ye8k3fk {
+  ._1ye8k3fl {
     margin-top: 1.7rem;
   }
+}
+@media (max-width:1280px) and (min-width:1024px) {
+  ._1ye8k3fa:not(._1ye8k3f0 ._1ye8k3fa) {
+    flex: 1 1;
+    overflow: hidden;
+  }
+  ._1ye8k3f6:not(._1ye8k3f0 ._1ye8k3f6) > * {
+    max-width: 50%;
+    width: 50%;
+  }
 }

package/dist/assets/ImageBillboard/ImageBillboard.css

@@ -139,6 +139,9 @@
   height: 100%;
   background-repeat: no-repeat;
   background-size: cover;
+  background-position: center center;
+}
+._18ygy9m0 ._1m7m2au {
   min-height: 380px;
 }
 ._1m7m2av {
@@ -192,9 +195,13 @@
   ._1m7m2am {
     flex-direction: column;
     gap: 24px;
+    align-items: center;
   }
 }
 @media screen and (max-width: 1023px) {
+  ._1m7m2au {
+    min-height: 380px;
+  }
   ._1m7m2ax {
     font-size: 30px;
   }