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

package/dist/es/components/VideoBanner/VideoBanner.css

@@ -0,0 +1,216 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-video-banner {
+  position: relative;
+  overflow: hidden;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-beta-video-banner {
+    margin-right: -80px;
+    margin-left: -80px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-video-banner {
+    margin-right: -64px;
+    margin-left: -64px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-video-banner {
+    margin-right: -48px;
+    margin-left: -48px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner {
+    margin-right: -16px;
+    margin-left: -16px;
+  }
+}
+.mfui-beta-video-banner__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: 400px;
+}
+@media screen and (min-width: 1440px) {
+  .mfui-beta-video-banner__wrapper {
+    height: 562px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-beta-video-banner__wrapper {
+    height: 500px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-video-banner__wrapper {
+    max-height: 440px;
+    padding-top: 52px;
+    padding-bottom: 52px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-video-banner__wrapper {
+    max-height: 440px;
+    padding-top: 64px;
+    padding-bottom: 64px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__wrapper {
+    max-height: 488px;
+    padding-top: 42px;
+    padding-bottom: 42px;
+  }
+}
+.mfui-beta-video-banner__background-image,
+.mfui-beta-video-banner__video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.mfui-beta-video-banner__background-image {
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+.mfui-beta-video-banner__content {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+@media screen and (min-width: 1440px) {
+  .mfui-beta-video-banner__content {
+    max-height: calc(562px - 2 * 70px);
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-beta-video-banner__content {
+    max-height: calc(500px - 2 * 70px);
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-video-banner__content {
+    max-height: calc(440px - 2 * 52px);
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-video-banner__content {
+    max-height: calc(440px - 2 * 64px);
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__content {
+    max-height: calc(488px - 2 * 42px);
+  }
+}
+.mfui-beta-video-banner__content_text-color_black {
+  color: #333333;
+}
+.mfui-beta-video-banner__content_text-color_white {
+  color: #FFFFFF;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__content_text-color-mobile_black {
+    color: #333333;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__content_text-color-mobile_white {
+    color: #FFFFFF;
+  }
+}
+.mfui-beta-video-banner__description {
+  margin-bottom: 32px;
+  white-space: pre-wrap;
+}
+.mfui-beta-video-banner__title {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__title {
+    margin-bottom: 20px;
+  }
+}
+.mfui-beta-video-banner__title,
+.mfui-beta-video-banner__text {
+  white-space: pre-wrap;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__title,
+  .mfui-beta-video-banner__text {
+    text-align: center;
+  }
+}
+.mfui-beta-video-banner__btns-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  margin: -24px -10px 0;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__btns-wrapper {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+}
+@media screen and (max-width: 479px) {
+  .mfui-beta-video-banner__btns-wrapper {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
+.mfui-beta-video-banner__link,
+.mfui-beta-video-banner__button {
+  margin: 24px 10px 0;
+}
+.mfui-beta-video-banner__cost {
+  font-size: 12px;
+  line-height: 16px;
+  margin-bottom: 18px;
+}
+.mfui-beta-video-banner__value {
+  display: inline;
+  margin: 0 3px;
+}
+.mfui-beta-video-banner__content,
+.mfui-beta-video-banner__breadcrumbs {
+  z-index: 1;
+}
+.mfui-beta-video-banner__breadcrumbs {
+  position: absolute;
+  top: 32px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__breadcrumbs {
+    display: none;
+  }
+}
+.mfui-beta-video-banner__grid {
+  width: 100%;
+}

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

@@ -0,0 +1,90 @@
+import React, { Ref } from 'react';
+import { Props as BreadcrumbsPropsType } from '../Breadcrumbs/Breadcrumbs';
+import './VideoBanner.less';
+declare type BreadCrumbsItemsType = BreadcrumbsPropsType['items'];
+export declare enum ClassName {
+    BUTTON = "button",
+    LINK = "link"
+}
+export declare const VideoType: {
+    readonly YOUTUBE: "youtube";
+    readonly VIDEO: "video";
+};
+declare type VideoType = typeof VideoType[keyof typeof VideoType];
+export declare const ButtonColor: {
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+};
+export declare type ButtonColorType = typeof ButtonColor[keyof typeof ButtonColor];
+export declare const TextColor: {
+    readonly BLACK: "black";
+    readonly WHITE: "white";
+};
+declare type TextColorType = typeof TextColor[keyof typeof TextColor];
+export interface IContent {
+    /** Заголовок */
+    title: string;
+    /** Текст-описание */
+    description: string;
+    /** Текст кнопки */
+    buttonTitle?: string;
+    /** Ссылка на кнопке */
+    buttonHref?: string;
+    /** Добавляет атрибут download для тега <a> компонента Button */
+    buttonDownload?: boolean;
+    /** Цвет кнопки */
+    buttonColor?: ButtonColorType;
+    /** Обработчик клика по кнопке */
+    onButtonClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Обработчик клика по ссылке */
+    onLinkClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Цвет текста */
+    textColor?: TextColorType;
+    /** Цвет текста на мобильном разрешении */
+    textColorMobile?: TextColorType;
+    /** Текст ссылки */
+    linkTitle?: string;
+    /** Адрес ссылки */
+    linkUrl?: string;
+    /** Добавляет атрибут download для тега <a> компонента TextLink */
+    linkDownload?: boolean;
+    /** Строка со стоимостью услуги */
+    cost?: string;
+}
+interface IVideoBannerProps {
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        link?: string;
+        breadcrumbs?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Данные для блока с контентом */
+    content?: IContent;
+    /** Источник видео. */
+    videoSrc?: string;
+    /** Тип видео */
+    videoType?: VideoType;
+    /** Наличие звука в видео */
+    isMuted?: boolean;
+    /** Изображение для мобильного разрешения */
+    imageMobile: string;
+    /** Изображение для планшетного разрешения */
+    imageTablet: string;
+    /** Изображение для компьютерного разрешения */
+    imageDesktop?: string;
+    /** Изображение для большого компьютерного разрешения */
+    imageDesktopWide?: string;
+    /** Хлебные крошки */
+    breadcrumbs?: BreadCrumbsItemsType;
+}
+declare const VideoBanner: React.FC<IVideoBannerProps>;
+export default VideoBanner;

package/dist/es/components/VideoBanner/VideoBanner.js

@@ -0,0 +1,272 @@
+import "core-js/modules/es.symbol";
+import "core-js/modules/es.symbol.description";
+import "core-js/modules/es.array.concat";
+import "core-js/modules/es.object.values";
+import "core-js/modules/es.string.link";
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import * as PropTypes from 'prop-types';
+import throttle from 'lodash.throttle';
+import { Button, Header, ContentArea, TextLink, Grid, GridColumn } from '@megafon/ui-core';
+import { breakpoints, cnCreate, filterDataAttrs, convert } from '@megafon/ui-helpers';
+import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
+import throttleTime from "../../constants/throttleTime";
+import "./VideoBanner.css";
+export var ClassName;
+
+(function (ClassName) {
+  ClassName["BUTTON"] = "button";
+  ClassName["LINK"] = "link";
+})(ClassName || (ClassName = {}));
+
+var typographyConfig = {
+  b: {
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement(Header, {
+        className: cn('value'),
+        as: "h3",
+        color: "inherit"
+      }, children);
+    }
+  }
+};
+export var VideoType = {
+  YOUTUBE: 'youtube',
+  VIDEO: 'video'
+};
+export var ButtonColor = {
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+export var TextColor = {
+  BLACK: 'black',
+  WHITE: 'white'
+};
+var cn = cnCreate('mfui-beta-video-banner');
+
+var VideoBanner = function VideoBanner(_ref2) {
+  var dataAttrs = _ref2.dataAttrs,
+      className = _ref2.className,
+      _ref2$classes = _ref2.classes,
+      classes = _ref2$classes === void 0 ? {} : _ref2$classes,
+      rootRef = _ref2.rootRef,
+      videoSrc = _ref2.videoSrc,
+      videoType = _ref2.videoType,
+      imageMobile = _ref2.imageMobile,
+      imageTablet = _ref2.imageTablet,
+      _ref2$imageDesktop = _ref2.imageDesktop,
+      imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
+      _ref2$imageDesktopWid = _ref2.imageDesktopWide,
+      imageDesktopWide = _ref2$imageDesktopWid === void 0 ? '' : _ref2$imageDesktopWid,
+      content = _ref2.content,
+      _ref2$isMuted = _ref2.isMuted,
+      isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
+      breadcrumbs = _ref2.breadcrumbs;
+
+  var _React$useState = React.useState(true),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isMobile = _React$useState2[0],
+      setIsMobile = _React$useState2[1];
+
+  var _React$useState3 = React.useState(imageMobile),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      imageSrc = _React$useState4[0],
+      setImageSrc = _React$useState4[1];
+
+  var isVideoData = !!videoSrc && !!videoType;
+  var isRenderVideo = !isMobile && isVideoData;
+  var renderContent = React.useCallback(function (_ref3) {
+    var title = _ref3.title,
+        description = _ref3.description,
+        buttonTitle = _ref3.buttonTitle,
+        buttonHref = _ref3.buttonHref,
+        buttonDownload = _ref3.buttonDownload,
+        _ref3$buttonColor = _ref3.buttonColor,
+        buttonColor = _ref3$buttonColor === void 0 ? ButtonColor.GREEN : _ref3$buttonColor,
+        onButtonClick = _ref3.onButtonClick,
+        onLinkClick = _ref3.onLinkClick,
+        _ref3$textColor = _ref3.textColor,
+        textColor = _ref3$textColor === void 0 ? TextColor.BLACK : _ref3$textColor,
+        textColorMobile = _ref3.textColorMobile,
+        linkTitle = _ref3.linkTitle,
+        linkUrl = _ref3.linkUrl,
+        linkDownload = _ref3.linkDownload,
+        cost = _ref3.cost;
+    return /*#__PURE__*/React.createElement(Grid, {
+      className: cn('grid'),
+      guttersLeft: "medium"
+    }, /*#__PURE__*/React.createElement(GridColumn, {
+      mobile: "12",
+      tablet: "7",
+      desktop: "7",
+      wide: "6"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('content', {
+        'text-color': textColor,
+        'text-color-mobile': textColorMobile
+      })
+    }, /*#__PURE__*/React.createElement(Header, {
+      className: cn('title'),
+      as: "h1",
+      color: "inherit"
+    }, title), /*#__PURE__*/React.createElement("div", {
+      className: cn('text')
+    }, /*#__PURE__*/React.createElement(Header, {
+      as: "h5",
+      color: "inherit",
+      className: cn('description')
+    }, description), cost && /*#__PURE__*/React.createElement("div", {
+      className: cn('cost')
+    }, convert(cost, typographyConfig))), /*#__PURE__*/React.createElement("div", {
+      className: cn('btns-wrapper')
+    }, buttonTitle && /*#__PURE__*/React.createElement(Button, {
+      className: cn(ClassName.BUTTON, [classes.button]),
+      theme: buttonColor,
+      href: buttonHref,
+      onClick: onButtonClick,
+      download: buttonDownload
+    }, buttonTitle), linkTitle && /*#__PURE__*/React.createElement(TextLink, {
+      className: cn(ClassName.LINK, [classes.link]),
+      href: linkUrl,
+      download: linkDownload,
+      onClick: onLinkClick
+    }, linkTitle)))));
+  }, []);
+  var renderVideo = React.useCallback(function () {
+    switch (videoType) {
+      case VideoType.YOUTUBE:
+        {
+          var url = "https://www.youtube.com/embed/".concat(videoSrc, "?");
+          var autoplay = '&autoplay=1';
+          var mute = "&mute=".concat(isMuted ? 1 : 0);
+          var loop = '&loop=1';
+          var rel = '&rel=0';
+          var controls = '&controls=0';
+          var info = '&showinfo=0e';
+          var policy = '&iv_load_policy=3';
+          var playlist = "&playlist=".concat(videoSrc);
+          var src = "".concat(url).concat(autoplay).concat(mute).concat(loop).concat(rel).concat(controls).concat(info).concat(policy).concat(playlist);
+          return /*#__PURE__*/React.createElement("iframe", {
+            title: "iframe",
+            className: cn('video'),
+            src: src,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay"
+          });
+        }
+
+      case VideoType.VIDEO:
+        {
+          return /*#__PURE__*/React.createElement("video", {
+            className: cn('video'),
+            autoPlay: true,
+            loop: true,
+            muted: isMuted
+          }, /*#__PURE__*/React.createElement("source", {
+            src: videoSrc,
+            type: "video/mp4"
+          }));
+        }
+
+      default:
+        {
+          return null;
+        }
+    }
+  }, [videoType, videoSrc, isMuted]);
+  React.useEffect(function () {
+    var getImageSrc = function getImageSrc() {
+      var windowWidth = window.innerWidth;
+
+      switch (true) {
+        case windowWidth >= breakpoints.DESKTOP_MIDDLE_START:
+          return imageDesktopWide;
+
+        case windowWidth >= breakpoints.DESKTOP_SMALL_START && windowWidth <= breakpoints.DESKTOP_SMALL_END:
+          return imageDesktop;
+
+        case windowWidth >= breakpoints.MOBILE_BIG_START && windowWidth <= breakpoints.MOBILE_BIG_END:
+          return imageTablet;
+
+        default:
+          return imageMobile;
+      }
+    };
+
+    var resizeHandler = function resizeHandler() {
+      setIsMobile(window.innerWidth < breakpoints.DESKTOP_SMALL_START);
+      setImageSrc(getImageSrc());
+    };
+
+    var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
+    resizeHandler();
+    window.addEventListener('resize', resizeHandlerThrottled);
+    return function () {
+      window.removeEventListener('resize', resizeHandlerThrottled);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+    className: cn([className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    className: cn('breadcrumbs'),
+    items: breadcrumbs,
+    color: content === null || content === void 0 ? void 0 : content.textColor,
+    classes: {
+      item: classes.breadcrumbs
+    }
+  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundImage: "url(".concat(imageSrc, ")")
+    },
+    className: cn('background-image')
+  }))));
+};
+
+VideoBanner.propTypes = {
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string,
+    link: PropTypes.string,
+    breadcrumbs: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  videoSrc: PropTypes.string,
+  videoType: PropTypes.oneOf(Object.values(VideoType)),
+  content: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    buttonTitle: PropTypes.string,
+    buttonHref: PropTypes.string,
+    buttonDownload: PropTypes.bool,
+    buttonColor: PropTypes.oneOf(Object.values(ButtonColor)),
+    onButtonClick: PropTypes.func,
+    onLinkClick: PropTypes.func,
+    textColor: PropTypes.oneOf(Object.values(TextColor)),
+    textColorMobile: PropTypes.oneOf(Object.values(TextColor)),
+    linkTitle: PropTypes.string,
+    linkUrl: PropTypes.string,
+    linkDownload: PropTypes.bool,
+    cost: PropTypes.string
+  }),
+  isMuted: PropTypes.bool,
+  imageMobile: PropTypes.string.isRequired,
+  imageTablet: PropTypes.string.isRequired,
+  imageDesktop: PropTypes.string,
+  imageDesktopWide: PropTypes.string,
+  breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string
+  }).isRequired)
+};
+export default VideoBanner;

package/dist/es/components/VideoBlock/VideoBlock.css

@@ -0,0 +1,127 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-video-block {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.mfui-beta-video-block__content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  height: 100%;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-block__content {
+    margin-top: 24px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-video-block__content {
+    margin-top: 32px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-beta-video-block__content {
+    margin-right: 20px;
+    padding-right: 20px;
+  }
+}
+.mfui-beta-video-block__header {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-beta-video-block__header {
+    margin-bottom: 16px;
+  }
+}
+.mfui-beta-video-block__description {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-beta-video-block__button {
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  max-width: 100%;
+  margin-top: 32px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-block__button {
+    -ms-flex-item-align: center;
+        align-self: center;
+  }
+}
+.mfui-beta-video-block__video {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.mfui-beta-video-block__video-wrapper {
+  height: 674px;
+  overflow: hidden;
+}
+@media screen and (min-width: 1440px) and (max-width: 1599px) {
+  .mfui-beta-video-block__video-wrapper {
+    height: 600px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-beta-video-block__video-wrapper {
+    height: 524px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-video-block__video-wrapper {
+    height: 505px;
+  }
+}
+.mfui-beta-video-block__video-wrapper_with-content {
+  height: 468px;
+}
+@media screen and (min-width: 1440px) and (max-width: 1599px) {
+  .mfui-beta-video-block__video-wrapper_with-content {
+    height: 415px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-beta-video-block__video-wrapper_with-content {
+    height: 363px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-video-block__video-wrapper_with-content {
+    height: 328px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-video-block__video-wrapper,
+  .mfui-beta-video-block__video-wrapper_with-content {
+    height: 379px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-block__video-wrapper,
+  .mfui-beta-video-block__video-wrapper_with-content {
+    height: 162px;
+  }
+}
+.mfui-beta-video-block__grid {
+  width: 100%;
+}