@npm_leadtech/legal-lib-components 5.2.24 → 5.2.32

package/dist/src/components/atoms/ReviewKeyFactsResultRatafia/ReviewKeyFactsResultRatafia.styled.ts

@@ -0,0 +1,56 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const ReviewKeyFactsResultRatafiaStyled = styled.section`
+  .review-key-facts-result {
+    &__review {
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      gap: 1rem;
+
+      border-radius: 4px;
+      background: var(--others-white);
+
+      &__question {
+        color: var(--neutral-neutral-1);
+        font-size: 0.75rem;
+        @media ${device['portrait-tablets']} {
+          font-size: 0.875rem;
+        }
+      }
+
+      &__buttons {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+
+        &__item {
+          display: flex;
+          padding: 0.25rem 0.5rem;
+          justify-content: center;
+          align-items: center;
+          gap: 0.25rem;
+          flex: 1 0 0;
+
+          border: none;
+          border-radius: 4px;
+          background: var(--neutral-neutral-6);
+
+          cursor: pointer;
+
+          &__icon {
+            width: 14px;
+          }
+          .positive {
+            color: var(--primary-main);
+          }
+          .negative {
+            color: var(--error-main);
+          }
+        }
+      }
+    }
+  }
+`

package/dist/src/components/atoms/ReviewKeyFactsResultRatafia/ReviewKeyFactsResultRatafia.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { type ReviewKeyFactsResultRatafiaProps } from './ReviewKeyFactsResultRatafiaProps.types'
-// import './ReviewKeyFactsResultRatafia.scss'
+import { ReviewKeyFactsResultRatafiaStyled } from './ReviewKeyFactsResultRatafia.styled'
 
 export const ReviewKeyFactsResultRatafia: React.FC<ReviewKeyFactsResultRatafiaProps> = ({
   reviewQuestion,
@@ -17,7 +17,7 @@ export const ReviewKeyFactsResultRatafia: React.FC<ReviewKeyFactsResultRatafiaPr
   review
 }) => {
   return (
-    <div className='review-key-facts-result'>
+    <ReviewKeyFactsResultRatafiaStyled className='review-key-facts-result'>
       {review === null ? (
         <div className='review-key-facts-result__review'>
           <p className='sans-serif review-key-facts-result__review__question'>{reviewQuestion}</p>
@@ -49,7 +49,7 @@ export const ReviewKeyFactsResultRatafia: React.FC<ReviewKeyFactsResultRatafiaPr
           <p className='sans-serif --small review-key-facts-result__review__question'>{reviewFeedbackText}</p>
         </div>
       )}
-    </div>
+    </ReviewKeyFactsResultRatafiaStyled>
   )
 }
 

package/dist/src/components/atoms/RichTextInner/RichTextInner.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// import './RichTextInner.scss'
-const RichTextInner = ({ children, customClass = '' }) => (_jsx("div", { className: `rich-text ${customClass}`, children: children }));
+import { RichTextInnerStyled } from './RichTextInner.styled';
+const RichTextInner = ({ children, customClass = '' }) => (_jsx(RichTextInnerStyled, { className: `rich-text ${customClass}`, children: children }));
 export default RichTextInner;

package/dist/src/components/atoms/RichTextInner/RichTextInner.styled.d.ts

@@ -0,0 +1 @@
+export declare const RichTextInnerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/atoms/RichTextInner/RichTextInner.styled.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+export const RichTextInnerStyled = styled.div `
+  .rich-text {
+    & > p {
+      margin-bottom: 1rem;
+    }
+    & p {
+      & > a {
+        text-decoration: underline;
+      }
+    }
+  }
+  &.rich-text {
+    p + h1,
+    p + h2,
+    p + h3,
+    p + h4,
+    p + h5,
+    p + h6 {
+      margin-top: 2.5rem;
+    }
+
+    ul + p,
+    ol + p,
+    ul + h1,
+    ul + h2,
+    ul + h3,
+    ul + h4,
+    ul + h5,
+    ul + h6 {
+      margin-top: 2rem;
+    }
+
+    .scroll-top-anchor {
+      cursor: pointer;
+    }
+  }
+`;

package/dist/src/components/atoms/RichTextInner/RichTextInner.styled.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+export const RichTextInnerStyled = styled.div`
+  .rich-text {
+    & > p {
+      margin-bottom: 1rem;
+    }
+    & p {
+      & > a {
+        text-decoration: underline;
+      }
+    }
+  }
+  &.rich-text {
+    p + h1,
+    p + h2,
+    p + h3,
+    p + h4,
+    p + h5,
+    p + h6 {
+      margin-top: 2.5rem;
+    }
+
+    ul + p,
+    ol + p,
+    ul + h1,
+    ul + h2,
+    ul + h3,
+    ul + h4,
+    ul + h5,
+    ul + h6 {
+      margin-top: 2rem;
+    }
+
+    .scroll-top-anchor {
+      cursor: pointer;
+    }
+  }
+`

package/dist/src/components/atoms/RichTextInner/RichTextInner.tsx

@@ -1,10 +1,10 @@
 import React, { type FC } from 'react'
 
 import { type RichTextInnerProps } from './RichTextInnerProps.types'
-// import './RichTextInner.scss'
+import { RichTextInnerStyled } from './RichTextInner.styled'
 
 const RichTextInner: FC<RichTextInnerProps> = ({ children, customClass = '' }) => (
-  <div className={`rich-text ${customClass}`}>{children}</div>
+  <RichTextInnerStyled className={`rich-text ${customClass}`}>{children}</RichTextInnerStyled>
 )
 
 export default RichTextInner

package/dist/src/components/atoms/RichTextStrapi/RichTextStrapi.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { RichTextStrapiStyled } from './RichTextStrapi.styled';
 import { useFormattedText } from './useFormattedText';
-// import './RichTextStrapi.scss'
 export const RichTextStrapi = ({ html = '', className = '', medias = [] }) => {
     const { text } = useFormattedText(html, medias);
     if (html.length === 0)
         return null;
-    return _jsx("div", { className: `richt-text-strapi m-richText ${className}`, dangerouslySetInnerHTML: { __html: text } });
+    return (_jsx(RichTextStrapiStyled, { className: `richt-text-strapi m-richText ${className}`, dangerouslySetInnerHTML: { __html: text } }));
 };

package/dist/src/components/atoms/RichTextStrapi/RichTextStrapi.styled.d.ts

@@ -0,0 +1 @@
+export declare const RichTextStrapiStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/atoms/RichTextStrapi/RichTextStrapi.styled.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export const RichTextStrapiStyled = styled.div `
+  &.richt-text-strapi {
+    & ul li,
+    ol li {
+      margin-bottom: 1rem;
+    }
+  }
+`;

package/dist/src/components/atoms/RichTextStrapi/RichTextStrapi.styled.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+export const RichTextStrapiStyled = styled.div`
+  &.richt-text-strapi {
+    & ul li,
+    ol li {
+      margin-bottom: 1rem;
+    }
+  }
+`

package/dist/src/components/atoms/RichTextStrapi/RichTextStrapi.tsx

@@ -1,12 +1,17 @@
 import React, { type FC } from 'react'
 
 import { type RichTextStrapiProps } from './RichTextStrapiProps'
+import { RichTextStrapiStyled } from './RichTextStrapi.styled'
 import { useFormattedText } from './useFormattedText'
-// import './RichTextStrapi.scss'
 
 export const RichTextStrapi: FC<RichTextStrapiProps> = ({ html = '', className = '', medias = [] }) => {
   const { text } = useFormattedText(html, medias)
   if (html.length === 0) return null
 
-  return <div className={`richt-text-strapi m-richText ${className}`} dangerouslySetInnerHTML={{ __html: text }}></div>
+  return (
+    <RichTextStrapiStyled
+      className={`richt-text-strapi m-richText ${className}`}
+      dangerouslySetInnerHTML={{ __html: text }}
+    ></RichTextStrapiStyled>
+  )
 }

package/dist/src/components/atoms/SearchSelect/SearchSelect.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Select from 'react-select';
+import { SearchSelectStyled } from './SearchSelect.styled';
 import classNames from 'classnames';
 import error from '../../../../images/svg/info-error_24px_outlined.svg';
-// import './SearchSelect.scss'
 export var MenuPlacement;
 (function (MenuPlacement) {
     MenuPlacement["top"] = "top";
@@ -41,7 +41,7 @@ const SearchSelect = (props) => {
         props.onChange(selectObject);
     };
     const TooltipObject = props.tooltip && typeof props.tooltip === 'string' ? (_jsx("p", { className: 'tooltip-form sans-serif --small', children: props.tooltip })) : ('');
-    return (_jsxs(_Fragment, { children: [props.label && (_jsx("div", { className: 'e-searchselect__inner', children: _jsx("label", { className: 'searchselect__label', children: props.label }) })), _jsxs("div", { className: `${classnames} ${props.width ? 'width' : ''}`, "data-qa": props.dataQA ?? props.name, children: [TooltipObject, _jsxs("span", { className: 'e-searchselect--error sans-serif --small', children: [_jsx("img", { src: error, alt: props.errorMessage, width: '24', height: '24' }), props.errorMessage] }), _jsx(Select, { styles: {
+    return (_jsxs(SearchSelectStyled, { children: [props.label && (_jsx("div", { className: 'e-searchselect__inner', children: _jsx("label", { className: 'searchselect__label', children: props.label }) })), _jsxs("div", { className: `${classnames} ${props.width ? 'width' : ''}`, "data-qa": props.dataQA ?? props.name, children: [TooltipObject, _jsxs("span", { className: 'e-searchselect--error sans-serif --small', children: [_jsx("img", { src: error, alt: props.errorMessage, width: '24', height: '24' }), props.errorMessage] }), _jsx(Select, { styles: {
                             control: (baseStyles, state) => {
                                 return {
                                     ...baseStyles,

package/dist/src/components/atoms/SearchSelect/SearchSelect.styled.d.ts

@@ -0,0 +1 @@
+export declare const SearchSelectStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/atoms/SearchSelect/SearchSelect.styled.js

@@ -0,0 +1,224 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const SearchSelectStyled = styled.div `
+  width: 100%;
+
+  .e-searchselect {
+    display: flex;
+    flex-direction: column-reverse;
+    margin-bottom: 2rem;
+    position: relative;
+
+    @media ${device.laptop} {
+      max-width: 50%;
+    }
+
+    &--error {
+      display: none;
+    }
+
+    &__inner {
+      margin-bottom: 0.5rem;
+
+      label {
+        font-weight: bold;
+      }
+    }
+
+    .css-1wy0on6 {
+      & div:not(:last-child):first-child {
+        display: none;
+      }
+    }
+
+    .css-1hb7zxy-IndicatorsContainer {
+      div:nth-child(1) {
+        display: none;
+      }
+    }
+
+    .css-1gtu0rj-indicatorContainer {
+      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCA4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IHNrZXRjaHRvb2wgNjMuMSAoMTAxMDEwKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT41N0NBNzNCRi02MUNDLTQ2RkYtOEE5Qi1DMzMzRTQxQUZDMzA8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggZD0iTTE1LjA2LDE2LjI5NSBMMTYsMTcuMjM1IEwxMiwyMS4yMzUgTDgsMTcuMjM1IEw4Ljk0LDE2LjI5NSBMMTIsMTkuMzQ4MzMzMyBMMTUuMDYsMTYuMjk1IFogTTEyLDIuMjk1IEwxNiw2LjI5NSBMMTUuMDYsNy4yMzUgTDEyLDQuMTgxNjY2NjcgTDguOTQsNy4yMzUgTDgsNi4yOTUgTDEyLDIuMjk1IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJVSS1TdHlsZS1HdWlkZS0tLUxEIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iVUktU3R5bGUtR3VpZGUtLS1MYXdEaXN0cmljdC0wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc2MS4wMDAwMDAsIC05NjYuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJpY29uL2V4cGFuZF9kcm9wZG93bl8yNHB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NTMuMDAwMDAwLCA5NjQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iQm91bmQiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PgogICAgICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9IuKGsy1Db2xvciIgbWFzaz0idXJsKCNtYXNrLTIpIiBmaWxsPSIjMUUyMDIxIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
+      background-repeat: no-repeat;
+      background-position: center center;
+      height: 30px;
+      width: 30px;
+
+      svg {
+        display: none;
+      }
+
+      &:not(:last-child):first-child {
+        display: none;
+      }
+    }
+
+    .css-tlfecz-indicatorContainer {
+      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCA4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IHNrZXRjaHRvb2wgNjMuMSAoMTAxMDEwKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT41N0NBNzNCRi02MUNDLTQ2RkYtOEE5Qi1DMzMzRTQxQUZDMzA8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggZD0iTTE1LjA2LDE2LjI5NSBMMTYsMTcuMjM1IEwxMiwyMS4yMzUgTDgsMTcuMjM1IEw4Ljk0LDE2LjI5NSBMMTIsMTkuMzQ4MzMzMyBMMTUuMDYsMTYuMjk1IFogTTEyLDIuMjk1IEwxNiw2LjI5NSBMMTUuMDYsNy4yMzUgTDEyLDQuMTgxNjY2NjcgTDguOTQsNy4yMzUgTDgsNi4yOTUgTDEyLDIuMjk1IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJVSS1TdHlsZS1HdWlkZS0tLUxEIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iVUktU3R5bGUtR3VpZGUtLS1MYXdEaXN0cmljdC0wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc2MS4wMDAwMDAsIC05NjYuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJpY29uL2V4cGFuZF9kcm9wZG93bl8yNHB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NTMuMDAwMDAwLCA5NjQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iQm91bmQiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PgogICAgICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9IuKGsy1Db2xvciIgbWFzaz0idXJsKCNtYXNrLTIpIiBmaWxsPSIjMUUyMDIxIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
+      background-repeat: no-repeat;
+      background-position: center center;
+      height: 30px;
+      width: 30px;
+
+      svg {
+        display: none;
+      }
+    }
+
+    .css-1u9des2-indicatorSeparator {
+      display: none;
+    }
+
+    .legal-selector {
+      display: flex;
+      flex-direction: column-reverse;
+      margin-bottom: 1rem;
+      position: relative;
+      border-radius: var(--global-border-radius);
+      transition: box-shadow 0.3s ease;
+      box-shadow: 0 0 0 1px var(--neutral-neutral-3);
+      background-color: var(--neutral-neutral-5);
+
+      .css-1hwfws3 {
+        height: 40px;
+      }
+
+      .css-yk16xz-control {
+        background-color: var(--neutral-neutral-6);
+        border: none;
+      }
+
+      .css-1pahdxg-control {
+        outline: none;
+        border: none;
+        background-color: var(--neutral-neutral-6);
+        box-shadow: 0 0 0 2px var(--primary-main);
+      }
+
+      .css-1wa3eu0-placeholder {
+        font-size: 0.875rem;
+        color: var(--neutral-neutral-2);
+      }
+
+      .css-26l3qy-menu {
+        border-radius: var(--global-border-radius);
+        box-shadow: var(--box-shadow-container);
+        font-size: 0.875rem;
+      }
+
+      .css-9gakcf-option {
+        background-color: var(--neutral-neutral-6);
+        color: var(--neutral-neutral-1);
+      }
+
+      .css-1uccc91-singleValue {
+        font-size: 0.875rem;
+        transition: all 0.3s ease;
+      }
+
+      .css-b8ldur-Input {
+        font-size: 0.875rem;
+      }
+
+      .css-1n7v3ny-option {
+        background-color: transparent;
+        &:hover {
+          background-color: var(--neutral-neutral-4);
+        }
+      }
+
+      &:hover {
+        box-shadow: 0 0 0 1px var(--neutral-neutral-2);
+      }
+
+      &:active,
+      &:focus {
+        outline: none;
+      }
+    }
+
+    &.--group-invalid {
+      .legal-selector {
+        box-shadow: 0 0 0 1px var(--error-main);
+      }
+
+      .css-yk16xz-control {
+        background-color: var(--error-error-3);
+      }
+    }
+
+    &.--is-invalid {
+      .e-searchselect--error {
+        display: flex;
+        align-content: center;
+        position: absolute;
+        bottom: 0;
+        margin-top: 0.5rem;
+        color: var(--error-main);
+
+        img {
+          max-width: 20px;
+          margin-right: 0.25rem;
+        }
+      }
+
+      .legal-selector {
+        box-shadow: 0 0 0 1px var(--error-main);
+      }
+
+      .css-yk16xz-control {
+        background-color: var(--error-error-3);
+      }
+    }
+  }
+
+  .searchselect__label {
+    color: var(--neutral-neutral-1);
+  }
+
+  .searchselect--fullwidth {
+    max-width: 100%;
+  }
+
+  .search-select--bare {
+    margin-bottom: 0;
+
+    .legal-selector,
+    .e-searchselect__inner {
+      margin-bottom: 0;
+    }
+
+    .legal-selector,
+    .css-1pahdxg-control,
+    .css-yk16xz-control {
+      min-height: 42px;
+    }
+
+    .legal-selector {
+      margin-bottom: 0;
+    }
+  }
+
+  .search-select--small {
+    width: 5.5rem;
+
+    @media ${device.laptop} {
+      max-width: 100%;
+    }
+  }
+
+  .mobile-select-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 1.25rem;
+  }
+
+  .width {
+    width: 85%;
+
+    @media ${device['portrait-tablets']} {
+      width: 60%;
+    }
+  }
+`;