@npm_leadtech/legal-lib-components 5.3.14 → 5.3.21

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

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

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

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

package/dist/src/components/atoms/index.d.ts

@@ -9,7 +9,6 @@ export * from './Button';
 export * from './ButtonIcon';
 export * from './CardPane';
 export * from './Checkbox';
-export * from './ContactCard';
 export * from './DatePickerCustom';
 export * from './DialogMenuIcon';
 export * from './Disclaimer';

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

@@ -9,7 +9,6 @@ export * from './Button';
 export * from './ButtonIcon';
 export * from './CardPane';
 export * from './Checkbox';
-export * from './ContactCard';
 export * from './DatePickerCustom';
 export * from './DialogMenuIcon';
 export * from './Disclaimer';

package/dist/src/components/atoms/index.ts

@@ -9,7 +9,6 @@ export * from './Button'
 export * from './ButtonIcon'
 export * from './CardPane'
 export * from './Checkbox'
-export * from './ContactCard'
 export * from './DatePickerCustom'
 export * from './DialogMenuIcon'
 export * from './Disclaimer'

package/dist/src/components/molecules/Article/Article.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg';
 import { Button } from '../../atoms';
 // import './Article.scss'
-const Article = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
-    return (_jsxs("div", { className: 'article', children: [_jsx("img", { src: imageUrl, className: 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', rel: 'noreferrer', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), isCategoryProductPage ? (_jsxs("div", { className: 'button-image-container', children: [_jsx(Button, { givenClass: 'thinner-letter', color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true }), _jsx("img", { className: 'article__arrow-right', src: ArrowRight, alt: '' })] })) : (_jsx(Button, { color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true }))] })] }));
+const Article = ({ imageUrl, title, articleUrl, summary }) => {
+    return (_jsxs("div", { className: 'article', children: [_jsx("img", { src: imageUrl, className: 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', rel: 'noreferrer', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), _jsx(Button, { color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true })] })] }));
 };
 export default Article;

package/dist/src/components/molecules/Article/Article.scss

@@ -62,22 +62,5 @@
         margin-top: 0;
       }
     }
-
-    .button-image-container {
-      align-items: center;
-      margin: 1rem 0 2rem 0;
-      display: flex;
-
-      .thinner-letter {
-        font-family: $font-sans;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 22px;
-        letter-spacing: -0.3px;
-        text-align: left;
-        margin: 0;
-        padding: 0 1rem 0 0;
-      }
-    }
   }
 }

package/dist/src/components/molecules/Article/Article.tsx

@@ -1,11 +1,10 @@
 import React, { type FC } from 'react'
 
-import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg'
 import { type ArticleProps } from './ArticleProps.types'
 import { Button } from '../../atoms'
 // import './Article.scss'
 
-const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
+const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary }) => {
   return (
     <div className='article'>
       <img src={imageUrl} className='image' loading='lazy' alt={title} />
@@ -14,21 +13,7 @@ const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCat
           <p className='title sans-serif --big'>{title} </p>
         </a>
         <div className='summary'>{summary}</div>
-        {isCategoryProductPage ? (
-          <div className='button-image-container'>
-            <Button
-              givenClass='thinner-letter'
-              color='tertiary'
-              label={'Read more'}
-              dataQa='article-read-more'
-              link={articleUrl}
-              isExternal
-            />
-            <img className='article__arrow-right' src={ArrowRight} alt=''></img>
-          </div>
-        ) : (
-          <Button color='tertiary' label={'Read more'} dataQa='article-read-more' link={articleUrl} isExternal />
-        )}
+        <Button color='tertiary' label={'Read more'} dataQa='article-read-more' link={articleUrl} isExternal />
       </div>
     </div>
   )

package/dist/src/components/molecules/Article/ArticleProps.types.d.ts

@@ -4,5 +4,4 @@ export interface ArticleProps {
     articleUrl: string;
     summary: string;
     id: string;
-    isCategoryProductPage: boolean;
 }

package/dist/src/components/molecules/Article/ArticleProps.types.ts

@@ -4,5 +4,4 @@ export interface ArticleProps {
   articleUrl: string
   summary: string
   id: string
-  isCategoryProductPage: boolean
 }

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCard.scss

@@ -64,7 +64,7 @@
   }
 
   &.primary {
-    background-color: get-color(neutral, neutral-6);
+    background-color: var(--neutral-neutral-6);
 
     .icon-svg-with-theme-color {
       background-color: get-color(primary, main-light-1);

package/dist/src/components/molecules/index.d.ts

@@ -9,7 +9,6 @@ export * from './BottomOverlay';
 export * from './BoxForm';
 export * from './Breadcrumb';
 export * from './ContactBox';
-export * from './ContactCardList';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './EmailContactBox';

package/dist/src/components/molecules/index.js

@@ -9,7 +9,6 @@ export * from './BottomOverlay';
 export * from './BoxForm';
 export * from './Breadcrumb';
 export * from './ContactBox';
-export * from './ContactCardList';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './EmailContactBox';

package/dist/src/components/molecules/index.ts

@@ -9,7 +9,6 @@ export * from './BottomOverlay'
 export * from './BoxForm'
 export * from './Breadcrumb'
 export * from './ContactBox'
-export * from './ContactCardList'
 export * from './ContinueEditingBanner'
 export * from './CountDownMessage'
 export * from './EmailContactBox'

package/dist/src/components/organisms/ArticlesList/ArticlesList.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Article } from '../../molecules';
 // import './ArticlesList.scss'
-const ArticlesList = ({ articles = [], isCategoryProductPage = false }) => {
+const ArticlesList = ({ articles = [] }) => {
     if (articles?.length === 0)
         return null;
-    return (_jsx("div", { className: 'articles_wrapper', children: articles.map((article) => (_jsx(Article, { ...article, isCategoryProductPage: isCategoryProductPage }, `article_${article?.id}`))) }));
+    return (_jsx("div", { className: 'articles_wrapper', children: articles.map((article) => (_jsx(Article, { ...article }, `article_${article?.id}`))) }));
 };
 export default ArticlesList;

package/dist/src/components/organisms/ArticlesList/ArticlesList.tsx

@@ -5,13 +5,13 @@ import { Article, type ArticleProps } from '../../molecules'
 import { type ArticlesListProps } from './ArticlesListProps.types'
 // import './ArticlesList.scss'
 
-const ArticlesList: FC<ArticlesListProps> = ({ articles = [], isCategoryProductPage = false }) => {
+const ArticlesList: FC<ArticlesListProps> = ({ articles = [] }) => {
   if (articles?.length === 0) return null
 
   return (
     <div className='articles_wrapper'>
       {articles.map((article: ArticleProps) => (
-        <Article key={`article_${article?.id}`} {...article} isCategoryProductPage={isCategoryProductPage} />
+        <Article key={`article_${article?.id}`} {...article} />
       ))}
     </div>
   )

package/dist/src/components/organisms/ArticlesList/ArticlesListProps.types.d.ts

@@ -1,5 +1,4 @@
 import { type ArticleProps } from '../../molecules';
 export interface ArticlesListProps {
     articles: ArticleProps[];
-    isCategoryProductPage?: boolean;
 }

package/dist/src/components/organisms/ArticlesList/ArticlesListProps.types.ts

@@ -2,5 +2,4 @@ import { type ArticleProps } from '../../molecules'
 
 export interface ArticlesListProps {
   articles: ArticleProps[]
-  isCategoryProductPage?: boolean
 }

package/dist/src/components/organisms/index.d.ts

@@ -3,7 +3,6 @@ export * from './Accordion';
 export * from './ArticlesList';
 export * from './AsSeeInContent';
 export * from './CardFunctionality';
-export * from './ContactContent';
 export * from './ContactJumbotron';
 export * from './CookiePolicyBar';
 export * from './ErrorContentRatafia';

package/dist/src/components/organisms/index.js

@@ -3,7 +3,6 @@ export * from './Accordion';
 export * from './ArticlesList';
 export * from './AsSeeInContent';
 export * from './CardFunctionality';
-export * from './ContactContent';
 export * from './ContactJumbotron';
 export * from './CookiePolicyBar';
 export * from './ErrorContentRatafia';

package/dist/src/components/organisms/index.ts

@@ -3,7 +3,6 @@ export * from './Accordion'
 export * from './ArticlesList'
 export * from './AsSeeInContent'
 export * from './CardFunctionality'
-export * from './ContactContent'
 export * from './ContactJumbotron'
 export * from './CookiePolicyBar'
 export * from './ErrorContentRatafia'

package/dist/src/components/sections/AboutUsSection/AboutUsSection.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AboutUsContent } from '../../organisms/AboutUsContent';
-// import './AboutUsSection.scss'
+import { AboutUsSectionStyled } from './AboutUsSection.styled';
 const AboutUsSection = ({ title, subTitle, contentAboutUs }) => {
-    return (_jsx("div", { className: 'about-us-section', children: _jsxs("div", { className: 'wrapper wrapper--responsive', children: [_jsx("div", { className: 'about-us-section__title', children: _jsx("span", { className: 'about-us-section__title__text', children: title }) }), Boolean(subTitle) && _jsx("h1", { className: 'about-us-section__sub-title', children: subTitle }), _jsx(AboutUsContent, { image: contentAboutUs.image, button: contentAboutUs?.button, children: contentAboutUs.children })] }) }));
+    return (_jsx(AboutUsSectionStyled, { className: 'about-us-section', children: _jsxs("div", { className: 'wrapper wrapper--responsive', children: [_jsx("div", { className: 'about-us-section__title', children: _jsx("span", { className: 'about-us-section__title__text', children: title }) }), Boolean(subTitle) && _jsx("h1", { className: 'about-us-section__sub-title', children: subTitle }), _jsx(AboutUsContent, { image: contentAboutUs.image, button: contentAboutUs?.button, children: contentAboutUs.children })] }) }));
 };
 export default AboutUsSection;

package/dist/src/components/{organisms/ContactContent/ContactContent.styled.d.ts → sections/AboutUsSection/AboutUsSection.styled.d.ts}

@@ -1 +1 @@
-export declare const ContactContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AboutUsSectionStyled: 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/sections/AboutUsSection/AboutUsSection.styled.js

@@ -0,0 +1,53 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const AboutUsSectionStyled = styled.div `
+  padding-top: 1.125rem;
+  background: var(--primary-main-light-6);
+  margin-bottom: 3rem;
+
+  @media ${device.laptop} {
+    margin-bottom: 5rem;
+  }
+
+  .about-us-section {
+    &__title {
+      text-align: center;
+      margin-bottom: 1rem;
+      &__text {
+        text-transform: uppercase;
+        font-size: 0.8rem;
+        line-height: 1.2;
+        font-weight: 700;
+        font-family: var(--font-sans);
+        color: var(--neutral-neutral-2);
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--neutral-neutral-3);
+      }
+    }
+
+    &__sub-title {
+      margin-bottom: 1.5rem;
+      text-align: center;
+      font-size: 2rem;
+      line-height: 1.2;
+      letter-spacing: -0.4px;
+      font-weight: 400;
+      font-family: var(--font-serif);
+      color: var(--neutral-neutral-1);
+
+      @media ${device['landscape-tablets']} {
+        font-size: 2.3rem;
+        max-width: $sm;
+        margin: 0 auto 2rem auto;
+      }
+
+      @media ${device.desktop} {
+        max-width: 792px;
+      }
+
+      @media ${device.laptop} {
+        font-size: 3rem;
+      }
+    }
+  }
+`;

package/dist/src/components/sections/AboutUsSection/AboutUsSection.styled.ts

@@ -0,0 +1,54 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const AboutUsSectionStyled = styled.div`
+  padding-top: 1.125rem;
+  background: var(--primary-main-light-6);
+  margin-bottom: 3rem;
+
+  @media ${device.laptop} {
+    margin-bottom: 5rem;
+  }
+
+  .about-us-section {
+    &__title {
+      text-align: center;
+      margin-bottom: 1rem;
+      &__text {
+        text-transform: uppercase;
+        font-size: 0.8rem;
+        line-height: 1.2;
+        font-weight: 700;
+        font-family: var(--font-sans);
+        color: var(--neutral-neutral-2);
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--neutral-neutral-3);
+      }
+    }
+
+    &__sub-title {
+      margin-bottom: 1.5rem;
+      text-align: center;
+      font-size: 2rem;
+      line-height: 1.2;
+      letter-spacing: -0.4px;
+      font-weight: 400;
+      font-family: var(--font-serif);
+      color: var(--neutral-neutral-1);
+
+      @media ${device['landscape-tablets']} {
+        font-size: 2.3rem;
+        max-width: $sm;
+        margin: 0 auto 2rem auto;
+      }
+
+      @media ${device.desktop} {
+        max-width: 792px;
+      }
+
+      @media ${device.laptop} {
+        font-size: 3rem;
+      }
+    }
+  }
+`

package/dist/src/components/sections/AboutUsSection/AboutUsSection.tsx

@@ -3,11 +3,11 @@ import React, { type FC } from 'react'
 
 import { AboutUsContent } from '../../organisms/AboutUsContent'
 import { type AboutUsSectionProps } from './AboutUsSectionProps.types'
-// import './AboutUsSection.scss'
+import { AboutUsSectionStyled } from './AboutUsSection.styled'
 
 const AboutUsSection: FC<AboutUsSectionProps> = ({ title, subTitle, contentAboutUs }) => {
   return (
-    <div className='about-us-section'>
+    <AboutUsSectionStyled className='about-us-section'>
       <div className='wrapper wrapper--responsive'>
         <div className='about-us-section__title'>
           <span className='about-us-section__title__text'>{title}</span>
@@ -18,7 +18,7 @@ const AboutUsSection: FC<AboutUsSectionProps> = ({ title, subTitle, contentAbout
           {contentAboutUs.children}
         </AboutUsContent>
       </div>
-    </div>
+    </AboutUsSectionStyled>
   )
 }
 

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AsSeeInContent, ContactContent } from '../../organisms';
-// import './AsSeeInSection.scss'
+import { AsSeeInContent } from '../../organisms';
+import { AsSeeInSectionStyled } from './AsSeeInSection.styled';
 const AsSeeInSection = ({ title, contentAsSeeIn, contactSectionTitle, contactSectionText, contactSectionBlocks }) => {
     if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
         return null;
     }
-    return (_jsxs("section", { className: 'as-seen-in-section-box', children: [_jsxs("div", { className: 'as-seen-in-section wrapper', children: [_jsx("h2", { className: 'as-seen-in-section__title', children: title }), _jsx(AsSeeInContent, { trustWorthyImages: contentAsSeeIn.trustWorthyImages, children: contentAsSeeIn.children })] }), _jsx(ContactContent, { title: contactSectionTitle, text: contactSectionText, contactCards: contactSectionBlocks })] }));
+    return (_jsxs(AsSeeInSectionStyled, { className: 'as-seen-in-section-box', children: [_jsxs("div", { className: 'as-seen-in-section wrapper', children: [_jsx("h2", { className: 'as-seen-in-section__title', children: title }), _jsx(AsSeeInContent, { trustWorthyImages: contentAsSeeIn.trustWorthyImages, children: contentAsSeeIn.children })] }), Array.isArray(contactSectionBlocks) && contactSectionBlocks.length > 0 && (_jsxs("div", { className: 'contact-us-section', children: [_jsx("h2", { className: 'contact-us-section__title', children: contactSectionTitle }), _jsx("p", { className: 'contact-us-section__text', children: contactSectionText }), Array.isArray(contactSectionBlocks) && (_jsx("div", { className: 'contact-us-section-blocks', children: contactSectionBlocks.map((item, index) => (_jsxs("div", { className: 'contact-us-section-blocks__item', children: [_jsx("div", { className: 'contact-us-section-blocks__item__image', children: item.image }), _jsx("div", { className: 'contact-us-section-blocks__item__title', children: item.title }), _jsx("p", { className: 'contact-us-section-blocks__item__text', children: item.body })] }, index))) }))] }))] }));
 };
 export default AsSeeInSection;

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.styled.d.ts

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

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.styled.js

@@ -0,0 +1,97 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const AsSeeInSectionStyled = styled.section `
+  flex-shrink: 0;
+  background-color: get-color(secondary, main-light-5);
+
+  @media ${device.laptop} {
+    margin-top: 12rem;
+  }
+
+  .as-seen-in-section {
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
+    background: get-color(others, white);
+    transform: translateY(-5rem);
+    padding: 1.5rem 0;
+
+    @media ${device.laptop} {
+      transform: translateY(-50%);
+    }
+
+    &__title {
+      color: var(--neutral-neutral-2);
+      text-align: center;
+      font-size: 32px;
+      font-family: var(--font-serif);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      margin: 1rem 0;
+    }
+  }
+
+  .contact-us-section {
+    display: flex;
+    flex-direction: column;
+    transform: translateY(-5rem);
+    color: var(--neutral-neutral-1);
+    margin-top: 1rem;
+
+    &__title {
+      text-align: center;
+      font-size: 32px;
+      font-family: $font-serif;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      margin: 1rem 0;
+    }
+
+    &__text {
+      text-align: center;
+      font-style: normal;
+      font-weight: 400;
+      margin: 0 0 2rem 0;
+    }
+
+    &-blocks {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      gap: 1rem;
+
+      @media ${device.laptop} {
+        flex-direction: row;
+        gap: 2.5rem;
+      }
+
+      &__item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: white;
+        box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
+        border-radius: 0.25rem;
+        min-width: 200px;
+        padding: 1rem;
+
+        &__image {
+          width: 2rem;
+        }
+
+        &__title {
+          margin-top: 1rem;
+          line-height: 1rem;
+        }
+
+        &__text {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+`;

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.styled.ts

@@ -0,0 +1,98 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const AsSeeInSectionStyled = styled.section`
+  flex-shrink: 0;
+  background-color: get-color(secondary, main-light-5);
+
+  @media ${device.laptop} {
+    margin-top: 12rem;
+  }
+
+  .as-seen-in-section {
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
+    background: get-color(others, white);
+    transform: translateY(-5rem);
+    padding: 1.5rem 0;
+
+    @media ${device.laptop} {
+      transform: translateY(-50%);
+    }
+
+    &__title {
+      color: var(--neutral-neutral-2);
+      text-align: center;
+      font-size: 32px;
+      font-family: var(--font-serif);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      margin: 1rem 0;
+    }
+  }
+
+  .contact-us-section {
+    display: flex;
+    flex-direction: column;
+    transform: translateY(-5rem);
+    color: var(--neutral-neutral-1);
+    margin-top: 1rem;
+
+    &__title {
+      text-align: center;
+      font-size: 32px;
+      font-family: $font-serif;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      margin: 1rem 0;
+    }
+
+    &__text {
+      text-align: center;
+      font-style: normal;
+      font-weight: 400;
+      margin: 0 0 2rem 0;
+    }
+
+    &-blocks {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      gap: 1rem;
+
+      @media ${device.laptop} {
+        flex-direction: row;
+        gap: 2.5rem;
+      }
+
+      &__item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: white;
+        box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
+        border-radius: 0.25rem;
+        min-width: 200px;
+        padding: 1rem;
+
+        &__image {
+          width: 2rem;
+        }
+
+        &__title {
+          margin-top: 1rem;
+          line-height: 1rem;
+        }
+
+        &__text {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+`