@megafon/ui-shared 2.0.0-beta.24 → 2.0.0-beta.240

package/dist/es/components/Instructions/Instructions.js

@@ -0,0 +1,229 @@
+import "core-js/modules/es.array.map";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import PropTypes from 'prop-types';
+import "./Instructions.css";
+import convert from 'htmr';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Grid, GridColumn, Header, Paragraph } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+export var pictureAlignTypes = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+export var pictureMaskTypes = {
+  ANDROID: 'android',
+  NEW_IPHONE: 'new-iphone',
+  BLACK_IPHONE: 'black-iphone',
+  WHITE_IPHONE: 'white-iphone',
+  LAPTOP: 'laptop',
+  IPHONE_12: 'iphone-12',
+  NONE: 'none'
+};
+var cn = cnCreate('mfui-beta-instructions');
+var swiperSlideCn = cn('slide');
+
+var Instructions = function Instructions(_ref) {
+  var rootRef = _ref.rootRef,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var instructionItem = _ref$classes.instructionItem,
+      desktopInstructionItem = _ref$classes.desktopInstructionItem,
+      mobileInstructionItem = _ref$classes.mobileInstructionItem,
+      activeInstructionItem = _ref$classes.activeInstructionItem,
+      desktopItemTitle = _ref$classes.desktopItemTitle,
+      mobileItemTitle = _ref$classes.mobileItemTitle,
+      instructionItemImg = _ref$classes.instructionItemImg,
+      additionalText = _ref$classes.additionalText,
+      title = _ref.title,
+      instructionItems = _ref.instructionItems,
+      _ref$pictureAlign = _ref.pictureAlign,
+      pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
+      _ref$pictureMask = _ref.pictureMask,
+      pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask,
+      getSwiper = _ref.getSwiper,
+      text = _ref.additionalText;
+
+  var _React$useState = React.useState(),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      swiperInstance = _React$useState2[0],
+      setSwiperInstance = _React$useState2[1];
+
+  var _React$useState3 = React.useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      slideIndex = _React$useState4[0],
+      setSlideIndex = _React$useState4[1];
+
+  var getSwiperInstance = React.useCallback(function (swiper) {
+    setSwiperInstance(swiper);
+    getSwiper && getSwiper(swiper);
+  }, []);
+  var getActiveCustomClass = React.useCallback(function (articleIndex, activeIndex) {
+    if (articleIndex !== activeIndex) {
+      return;
+    }
+
+    return activeInstructionItem;
+  }, [activeInstructionItem]);
+  var handleArticleClick = React.useCallback(function (ind) {
+    return function () {
+      setSlideIndex(ind);
+      swiperInstance && swiperInstance.slideTo(ind);
+    };
+  }, [swiperInstance]);
+  var renderTitle = React.useCallback(function (resolution) {
+    return /*#__PURE__*/React.createElement(Header, {
+      className: cn('title', {
+        resolution: resolution
+      }),
+      as: "h2"
+    }, title);
+  }, []);
+  var renderText = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(Paragraph, {
+      className: cn('text', [additionalText]),
+      hasMargin: false
+    }, convert(text));
+  }, [text, additionalText]);
+  var renderPicture = React.useCallback(function () {
+    if (pictureMask === pictureMaskTypes.NONE) {
+      return renderSlider();
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('img-wrapper')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('device-screen')
+    }), renderSlider());
+  }, [pictureMask]);
+  var renderVideo = React.useCallback(function (mediaUrl) {
+    return /*#__PURE__*/React.createElement("video", {
+      className: cn('swiper-img'),
+      autoPlay: true,
+      muted: true,
+      loop: true,
+      playsInline: true
+    }, /*#__PURE__*/React.createElement("source", {
+      src: mediaUrl,
+      type: "video/mp4"
+    }));
+  }, []);
+  var renderSlider = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(Swiper, {
+      className: cn('swiper'),
+      onSwiper: getSwiperInstance,
+      noSwipingClass: swiperSlideCn
+    }, instructionItems.map(function (_ref2, ind) {
+      var mediaUrl = _ref2.mediaUrl,
+          isVideo = _ref2.isVideo;
+      return /*#__PURE__*/React.createElement(SwiperSlide, {
+        className: swiperSlideCn,
+        key: ind + mediaUrl
+      }, isVideo ? renderVideo(mediaUrl) : /*#__PURE__*/React.createElement("img", {
+        className: cn('swiper-img', [instructionItemImg]),
+        src: mediaUrl,
+        alt: ""
+      }));
+    }));
+  }, [instructionItems]);
+  var renderDesktopArticles = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement("ul", {
+      className: cn('articles-list', {
+        'text-after': !!text,
+        desktop: true
+      })
+    }, instructionItems.map(function (_ref3, ind) {
+      var itemTitle = _ref3.title;
+      return /*#__PURE__*/React.createElement("li", {
+        className: cn('articles-item', {
+          active: slideIndex === ind
+        }, [getActiveCustomClass(ind, slideIndex), instructionItem, desktopInstructionItem]),
+        "data-index": ind,
+        onClick: handleArticleClick(ind),
+        key: ind
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cn('articles-item-dot')
+      }, /*#__PURE__*/React.createElement("span", {
+        className: cn('articles-item-dot-number')
+      }, ind + 1)), /*#__PURE__*/React.createElement("div", {
+        className: cn('articles-item-title', [desktopItemTitle])
+      }, itemTitle));
+    }));
+  }, [instructionItems, slideIndex, handleArticleClick, text]);
+  var renderMobileArticles = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('articles-list', {
+        mobile: true
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('articles-title-block')
+    }, instructionItems.map(function (_ref4, ind) {
+      var itemTitle = _ref4.title;
+      return slideIndex === ind && /*#__PURE__*/React.createElement("div", {
+        className: cn('articles-title', [mobileItemTitle]),
+        "data-index": ind,
+        key: ind
+      }, itemTitle);
+    })), /*#__PURE__*/React.createElement("ul", {
+      className: cn('articles-dots', {
+        'text-after': !!text
+      })
+    }, instructionItems.map(function (_item, ind) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: ind,
+        className: cn('articles-dot', {
+          active: slideIndex === ind
+        }, [getActiveCustomClass(ind, slideIndex), instructionItem, mobileInstructionItem]),
+        onClick: handleArticleClick(ind)
+      }, /*#__PURE__*/React.createElement("span", {
+        className: cn('articles-dot-number')
+      }, ind + 1));
+    })));
+  }, [instructionItems, slideIndex, handleArticleClick, text]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      mask: pictureMask
+    }),
+    ref: rootRef
+  }, /*#__PURE__*/React.createElement(Grid, {
+    hAlign: "center"
+  }, /*#__PURE__*/React.createElement(GridColumn, {
+    all: "12"
+  }, renderTitle('mobile'), /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('picture', {
+      align: pictureAlign
+    })
+  }, renderPicture()), /*#__PURE__*/React.createElement("div", {
+    className: cn('articles', {
+      align: pictureAlign
+    })
+  }, renderTitle('desktop'), renderMobileArticles(), renderDesktopArticles(), text && renderText())))));
+};
+
+Instructions.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  classes: PropTypes.shape({
+    instructionItem: PropTypes.string,
+    desktopInstructionItem: PropTypes.string,
+    mobileInstructionItem: PropTypes.string,
+    activeInstructionItem: PropTypes.string,
+    desktopItemTitle: PropTypes.string,
+    mobileItemTitle: PropTypes.string,
+    instructionItemImg: PropTypes.string
+  }),
+  title: PropTypes.string.isRequired,
+  additionalText: PropTypes.string,
+  instructionItems: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+    mediaUrl: PropTypes.string.isRequired,
+    isVideo: PropTypes.bool.isRequired
+  }).isRequired).isRequired,
+  pictureAlign: PropTypes.oneOf([pictureAlignTypes.LEFT, pictureAlignTypes.RIGHT]),
+  pictureMask: PropTypes.oneOf([pictureMaskTypes.ANDROID, pictureMaskTypes.NEW_IPHONE, pictureMaskTypes.WHITE_IPHONE, pictureMaskTypes.BLACK_IPHONE, pictureMaskTypes.LAPTOP, pictureMaskTypes.IPHONE_12, pictureMaskTypes.NONE]),
+  getSwiper: PropTypes.func
+};
+export default Instructions;

package/dist/es/components/PageTitle/PageTitle.css

@@ -0,0 +1,80 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-page-title {
+  display: inline-block;
+  width: 100%;
+}
+.mfui-beta-page-title__breadcrumbs {
+  margin-top: 32px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-page-title__breadcrumbs {
+    display: none;
+  }
+}
+.mfui-beta-page-title__title {
+  margin-top: 110px;
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-page-title__title {
+    margin-top: 100px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-page-title__title {
+    margin-top: 90px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-page-title__title {
+    margin-top: 45px;
+  }
+}
+.mfui-beta-page-title__badge {
+  font-size: 12px;
+  line-height: 16px;
+  display: inline-block;
+  margin-top: 16px;
+  padding: 2px 14px;
+  color: #FFFFFF;
+  font-weight: 500;
+  background-color: #731982;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-beta-page-title__badge_under-breadcrumbs {
+    margin-top: 32px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-page-title__badge_under-breadcrumbs {
+    margin-top: 24px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-page-title__badge_under-breadcrumbs {
+    margin-top: 16px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-beta-page-title__title_under-breadcrumbs {
+    margin-top: 60px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-page-title__title_under-breadcrumbs {
+    margin-top: 50px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-page-title__title_under-breadcrumbs {
+    margin-top: 45px;
+  }
+}
+.mfui-beta-page-title__badge + .mfui-beta-page-title__title {
+  margin-top: 8px;
+}

package/dist/es/components/PageTitle/PageTitle.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import './PageTitle.less';
+import { Props as BreadcrumbsType } from '../Breadcrumbs/Breadcrumbs';
+declare type Props = {
+    /** Текст заголовка */
+    title: string | React.ReactNode | React.ReactNode[];
+    /** Хлебные крошки */
+    breadcrumbs?: BreadcrumbsType['items'];
+    /** Текст бейджа */
+    badge?: string;
+    /** Растягивание компонента на всю доступную ширину */
+    isFullWidth?: boolean;
+    /** Класс для корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        breadcrumbs?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.RefObject<HTMLDivElement>;
+};
+declare const PageTitle: React.FC<Props>;
+export default PageTitle;

package/dist/es/components/PageTitle/PageTitle.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Header, Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./PageTitle.css";
+import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
+var cn = cnCreate('mfui-beta-page-title');
+
+var PageTitle = function PageTitle(_ref) {
+  var title = _ref.title,
+      breadcrumbs = _ref.breadcrumbs,
+      badge = _ref.badge,
+      _ref$isFullWidth = _ref.isFullWidth,
+      isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef;
+  var isBreadcrumbs = !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length);
+  var renderPageTitle = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, badge && /*#__PURE__*/React.createElement("div", {
+      className: cn('badge', {
+        'under-breadcrumbs': isBreadcrumbs
+      })
+    }, badge), /*#__PURE__*/React.createElement(Header, {
+      className: cn('title', {
+        'under-breadcrumbs': isBreadcrumbs && !badge
+      }),
+      as: "h1"
+    }, title));
+  }, [breadcrumbs, classes, badge, title]);
+  var renderPageTitleWithGrid = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, {
+      wide: "8",
+      desktop: "10",
+      tablet: "12",
+      mobile: "12"
+    }, renderPageTitle()));
+  }, [renderPageTitle]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn([className]),
+    ref: rootRef
+  }, (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    items: breadcrumbs,
+    className: cn('breadcrumbs', [classes.breadcrumbs])
+  }), isFullWidth ? renderPageTitle() : renderPageTitleWithGrid());
+};
+
+PageTitle.propTypes = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string
+  }).isRequired),
+  badge: PropTypes.string,
+  isFullWidth: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    breadcrumbs: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])])
+};
+export default PageTitle;

package/dist/es/components/Partners/Partners.css

@@ -0,0 +1,53 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-partners__tile:not(:last-child) {
+  margin-bottom: 20px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-partners__tile:not(:last-child) {
+    margin-bottom: 16px;
+  }
+}
+.mfui-beta-partners__tile-inner {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: 132px;
+  padding: 28px 48px;
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-partners__tile-inner {
+    height: 104px;
+    padding: 22px 37px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-partners__tile-inner {
+    height: 77px;
+    padding: 10px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-partners__tile-inner {
+    height: 60px;
+    padding: 8px;
+  }
+}
+.mfui-beta-partners__img-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.mfui-beta-partners__tile-img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}

package/dist/es/components/Partners/Partners.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import './Partners.less';
+export declare type ItemType = {
+    src: string;
+    href?: string;
+    alt: string;
+};
+export interface IPartnersProps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        itemClass?: string;
+    };
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Список логотипов */
+    items: ItemType[];
+    /** Обработчик клика по стрелке вперед (должен быть обернут в useCallback) */
+    onNextClick?: (index: number) => void;
+    /** Обработчик клика по стрелке назад (должен быть обернут в useCallback) */
+    onPrevClick?: (index: number) => void;
+    /** Обработчик смены слайда (должен быть обернут в useCallback) */
+    onChange?: (currentIndex: number, previousIndex: number, slidesPerView?: number | 'auto') => void;
+}
+declare const Partners: React.FC<IPartnersProps>;
+export default Partners;

package/dist/es/components/Partners/Partners.js

@@ -0,0 +1,114 @@
+import "core-js/modules/es.array.map";
+import "core-js/modules/es.array.slice";
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _slidesSettings;
+
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { Grid, GridColumn, Tile, Carousel } from '@megafon/ui-core';
+import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./Partners.css";
+var MAX_GRID_ITEMS_LENGTH = 8;
+var slidesSettings = (_slidesSettings = {}, _defineProperty(_slidesSettings, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 2,
+  spaceBetween: 16
+}), _defineProperty(_slidesSettings, breakpoints.MOBILE_MIDDLE_START, {
+  slidesPerView: 3,
+  spaceBetween: 20
+}), _defineProperty(_slidesSettings, breakpoints.DESKTOP_SMALL_START, {
+  slidesPerView: 4,
+  spaceBetween: 20
+}), _slidesSettings);
+var cn = cnCreate('mfui-beta-partners');
+
+var Partners = function Partners(_ref) {
+  var rootRef = _ref.rootRef,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var root = _ref$classes.root,
+      itemClass = _ref$classes.itemClass,
+      dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      items = _ref.items,
+      onChange = _ref.onChange,
+      onNextClick = _ref.onNextClick,
+      onPrevClick = _ref.onPrevClick;
+  var renderItem = React.useCallback(function (item) {
+    if (!item) {
+      return null;
+    }
+
+    var src = item.src,
+        href = item.href,
+        alt = item.alt;
+    return /*#__PURE__*/React.createElement(Tile, {
+      className: cn('tile'),
+      href: href,
+      shadowLevel: "low",
+      isInteractive: !!href
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('tile-inner', [itemClass])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('img-wrapper')
+    }, /*#__PURE__*/React.createElement("img", {
+      src: src,
+      alt: alt,
+      className: cn('tile-img')
+    }))));
+  }, []);
+  var renderGrid = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(Grid, {
+      guttersLeft: "medium",
+      guttersBottom: "medium"
+    }, items.map(function (item, i) {
+      return /*#__PURE__*/React.createElement(GridColumn, {
+        key: i + item.src,
+        all: "3",
+        mobile: "6"
+      }, renderItem(item));
+    }));
+  }, [items]);
+  var renderCarousel = React.useCallback(function () {
+    var halfItemsLength = Math.ceil(items.length / 2);
+    var topRow = items.slice(0, halfItemsLength);
+    var bottomRow = items.slice(halfItemsLength);
+    return /*#__PURE__*/React.createElement(Carousel, {
+      slidesSettings: slidesSettings,
+      onChange: onChange,
+      onNextClick: onNextClick,
+      onPrevClick: onPrevClick
+    }, topRow.map(function (item, i) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: i + item.src,
+        className: cn('slide')
+      }, renderItem(item), renderItem(bottomRow[i]));
+    }));
+  }, [items]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: rootRef,
+    className: cn([root, className])
+  }, filterDataAttrs(dataAttrs)), items.length > MAX_GRID_ITEMS_LENGTH ? renderCarousel() : renderGrid());
+};
+
+Partners.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    itemClass: PropTypes.string
+  }),
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  className: PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    href: PropTypes.string,
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string.isRequired
+  }).isRequired).isRequired,
+  onChange: PropTypes.func,
+  onNextClick: PropTypes.func,
+  onPrevClick: PropTypes.func
+};
+export default Partners;

package/dist/es/components/PictureWithDescription/PictureWithDescription.css

@@ -0,0 +1,80 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-beta-picture-with-description {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+}
+.mfui-beta-picture-with-description__title {
+  margin-bottom: 24px;
+}
+.mfui-beta-picture-with-description__picture {
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  overflow: hidden;
+  text-align: center;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-beta-picture-with-description__picture {
+    margin: 0 auto 32px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-beta-picture-with-description__picture {
+    -webkit-box-ordinal-group: 3;
+        -ms-flex-order: 2;
+            order: 2;
+    width: 50%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-beta-picture-with-description__picture_align_left {
+    -webkit-box-ordinal-group: 1;
+        -ms-flex-order: 0;
+            order: 0;
+    margin-right: 20px;
+  }
+}
+.mfui-beta-picture-with-description__img {
+  width: 100%;
+  max-width: 550px;
+  height: 100%;
+}
+.mfui-beta-picture-with-description__content :first-child {
+  margin-top: 0 !important;
+}
+.mfui-beta-picture-with-description__content :last-child {
+  margin-bottom: 0 !important;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-beta-picture-with-description__articles {
+    -webkit-box-ordinal-group: 2;
+        -ms-flex-order: 1;
+            order: 1;
+    width: 50%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-beta-picture-with-description__articles_text-top-align {
+    -ms-flex-item-align: start;
+        align-self: flex-start;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-beta-picture-with-description__articles_align_right {
+    margin-right: 20px;
+  }
+}