@meduza/ui-kit-2 0.0.1 → 0.1.0

package/src/HalfBlock/HalfBlock.module.css

@@ -0,0 +1,88 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+
+  text-align: left;
+}
+
+.main {
+  display: flex;
+  flex-flow: column nowrap;
+
+  @media $landscapeTablet {
+    align-items: center;
+    flex-flow: row nowrap;
+  }
+}
+
+.body {
+  order: -1;
+
+  max-width: 860px;
+  margin: 0 auto;
+
+  @media $portraitTablet {
+    text-align: center;
+  }
+
+  @media $landscapeTablet {
+    align-items: flex-start;
+    justify-content: center;
+    order: 0;
+
+    width: 50%;
+    max-width: none;
+    height: 100%;
+    margin-left: 25px;
+
+    text-align: left;
+  }
+}
+
+.footer {
+  width: 100%;
+  max-width: 650px;
+  margin: 0 auto;
+  padding-top: 3px;
+
+  @media $landscapeTablet {
+    max-width: 1000px;
+    margin: auto;
+    padding-top: 0;
+
+    border-top: 1px solid #e6e6e6;
+  }
+}
+
+.image {
+  flex-grow: 1;
+
+  margin: 0 -20px 0;
+  margin-top: 18px;
+
+  @media $mobile {
+    margin: 31px 0 -5px;
+  }
+
+  @media $landscapeTablet {
+    width: 50%;
+    margin: 0;
+  }
+}
+
+/* VISIBILITY */
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}

package/src/HalfBlock/HalfBlock.stories.module.css

@@ -0,0 +1,5 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+}

package/src/HalfBlock/HalfBlock.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { HalfBlock } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './HalfBlock.stories.module.css'
+
+export default {
+  title: 'Main / HalfBlock',
+  component: HalfBlock,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        <HalfBlock />
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/HalfBlock/HalfBlock.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { HalfBlock } from './'
+import { HalfBlockProps } from './HalfBlock.types'
+import styles from './HalfBlock.module.css'
+
+describe('Half Block', () => {
+  let props: HalfBlockProps
+
+  const renderComponent = () => render(<HalfBlock {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const halfBlock = getByTestId('half-block')
+
+    expect(halfBlock).toHaveClass(styles.root)
+  })
+})

package/src/HalfBlock/HalfBlock.types.ts

@@ -0,0 +1,4 @@
+export interface HalfBlockProps {
+  block: any,
+  styleContext?: string[] | string
+}

package/src/HalfBlock/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { HalfBlockProps } from './HalfBlock.types'
+
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+
+import { RenderBlocks } from '../RenderBlocks'
+import { Image } from '../Image'
+import { MediaCaption } from '../MediaCaption'
+
+import styles from './HalfBlock.module.css'
+
+export const HalfBlock: React.FC<HalfBlockProps> = ({
+  block: {
+    only_on: onlyOn,
+    data,
+    data: {
+      cover: { optimized, ratio, credit, caption }
+    }
+  },
+  styleContext
+}) => {
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles[onlyOn], true]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <div data-testid="half-block" className={makeClassName(classNames)}>
+      <div className={styles.main}>
+        <div className={styles.image}>
+          <Image optimized={optimized} ratio={ratio} display="super_full" />
+        </div>
+        <div className={styles.body}>
+          {data.blocks.map(item => (
+            <RenderBlocks key={item.id} block={item} styleContext={['rich']} />
+          ))}
+        </div>
+      </div>
+      <div className={styles.footer}>
+        <MediaCaption
+          credit={credit}
+          caption={caption}
+          styleContext={styleContext}
+        />
+      </div>
+    </div>
+  )
+}

package/src/Image/Image.module.css

@@ -0,0 +1,78 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+  z-index: 1;
+
+  display: block;
+  overflow: hidden;
+
+  @media $mobile {
+    border-radius: inherit;
+  }
+}
+
+.placeholder,
+.root img {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+}
+
+.wrapper {
+  display: block;
+
+  width: 100%;
+
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+}
+
+.placeholder {
+  transition: background-color 250ms ease;
+
+  background-color: #f2f2f2;
+}
+
+.loaded {
+  background: transparent;
+}
+
+.fullscreen picture {
+  cursor: pointer;
+}
+
+.fullscreen picture:hover::after {
+  opacity: 1;
+}
+
+.fullscreen picture::after {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+
+  width: 40px;
+  height: 40px;
+
+  transition: opacity 250ms ease;
+  pointer-events: none;
+
+  opacity: 0;
+  border: 0.5px solid rgba(255, 255, 255, 0.15);
+  border-radius: 20px;
+  background-color: rgba(0, 0, 0, 0.7);
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.197 10.207V3.763h-6.463' stroke='%23DBDBDB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.793 4.166l-6.173 6.172' stroke='%23DBDBDB' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.803 13.733v6.444h6.463' stroke='%23DBDBDB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.207 19.774l6.173-6.171' stroke='%23DBDBDB' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+
+  @media $landscapeTablet {
+    content: '';
+  }
+}
+
+[data-input='mouse'] .wrapper {
+  outline: none;
+}

package/src/Image/Image.stories.module.css

@@ -0,0 +1,5 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+}

package/src/Image/Image.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import { Image } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './Image.stories.module.css'
+
+import mock from './mock.json'
+
+export default {
+  title: 'Main / Image',
+  component: Image,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  const {
+    image: { data }
+  } = mock
+
+  return (
+    <>
+      <div className={styles.root}>
+        <Image
+          optimized={data.optimized}
+          width={data.width}
+          height={data.height}
+          alt={data.credit}
+          display={data.display}
+          lazy={data.lazy}
+        />
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/Image/Image.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { Image } from './'
+import styles from './Image.module.css'
+
+import mock from './mock.json'
+
+describe('Image', () => {
+  const {
+    image: { data }
+  } = mock
+
+  const renderComponent = () =>
+    render(
+      <Image
+        optimized={data.optimized}
+        width={data.width}
+        height={data.height}
+        alt={data.credit}
+        display={data.display}
+        lazy={data.lazy}
+      />
+    )
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const image = getByTestId('image')
+
+    expect(image).toHaveClass(styles.root)
+  })
+})

package/src/Image/Image.types.ts

@@ -0,0 +1,40 @@
+export interface OptimizedImageItem {
+  '1x': string
+  '2x': string
+  '1x_webp': string
+  '2x_webp': string
+}
+
+export interface ImageProps {
+  alt?: string
+  display?: string
+  optimized?: {
+    original: string
+    w325: OptimizedImageItem
+    w520: OptimizedImageItem
+    w650: OptimizedImageItem
+    w980: OptimizedImageItem
+    w1335: OptimizedImageItem
+  }
+  width?: number
+  height?: number
+  source?: object
+  lazy?: boolean
+  fullscreen?: boolean
+  ratio?: number
+}
+
+export interface PictureProps {
+  source?: object
+  optimized?: {
+    original: string
+    w325: OptimizedImageItem
+    w520: OptimizedImageItem
+    w650: OptimizedImageItem
+    w980: OptimizedImageItem
+    w1335: OptimizedImageItem
+  }
+  alt?: string
+  fallbackSource: string
+  display: string
+}

package/src/Image/RenderPicture.tsx

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react'
+import { PictureProps } from './Image.types'
+
+import { imageBreakpoints, imageConditionalKeys } from '../constants'
+import { toCamel } from '../utils/toCamel'
+
+export const RenderPicture: React.FC<PictureProps> = ({
+  source,
+  fallbackSource,
+  optimized,
+  alt,
+  display
+}) => {
+  const [fallback, setFallback] = useState(false)
+
+  useEffect(() => {
+    setFallback(!window.HTMLPictureElement)
+  }, [])
+
+  const keys =
+    imageConditionalKeys[toCamel(display)] || imageConditionalKeys.default
+
+  return (
+    <picture>
+      {source && (
+        <source media="(min-width: 325px)" srcSet={`${source[1]} 2x`} />
+      )}
+
+      {optimized && !optimized.w325 && (
+        <source media="(min-width: 0)" srcSet={`${optimized.original}`} />
+      )}
+
+      {optimized &&
+        keys.map(key => {
+          const breakpoint = optimized[`w${key}`]
+
+          if (!breakpoint) {
+            return null
+          }
+
+          return (
+            <React.Fragment key={key}>
+              <source
+                type="image/webp"
+                media={imageBreakpoints[key]}
+                srcSet={`${breakpoint['2x_webp']} 2x, ${breakpoint['1x_webp']} 1x `}
+              />
+
+              <source
+                type="image/png"
+                media={imageBreakpoints[key]}
+                srcSet={`${breakpoint['2x']} 2x, ${breakpoint['1x']} 1x `}
+              />
+            </React.Fragment>
+          )
+        })}
+
+      <img
+        src={
+          fallback
+            ? fallbackSource
+            : 'data:image/gif;base64,R0lGODlhAQABAPAAAPLy8gAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='
+        }
+        alt={alt}
+      />
+    </picture>
+  )
+}
+
+export default RenderPicture

package/src/Image/index.tsx

@@ -0,0 +1,101 @@
+import React, { useContext } from 'react'
+import { ImageProps } from './Image.types'
+
+import makeClassName from '../utils/makeClassName'
+
+import BlockContext from '../utils/BlockContext'
+import viewportSize from '../utils/viewportSize'
+import { MediaQuerySizes } from '../constants'
+
+import { Lazy } from '../Lazy'
+import RenderPicture from './RenderPicture'
+
+import styles from './Image.module.css'
+
+export const Image: React.FC<ImageProps> = ({
+  alt,
+  display,
+  optimized,
+  width,
+  height,
+  source,
+  lazy,
+  fullscreen,
+  ratio
+}) => {
+  const { lightBox } = useContext(BlockContext)
+
+  const handleClick = (): void => {
+    const { width: viewportWidth } = viewportSize()
+
+    if (
+      (optimized && !optimized.original) ||
+      !lightBox ||
+      (viewportWidth >= MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen)
+    ) {
+      return
+    }
+
+    postMessage('fullscreen_click', 'click')
+    lightBox.show(optimized, width, height, alt)
+  }
+
+  const pictureStyles = {
+    paddingBottom: `${100 / (ratio || width / height)}%`
+  }
+
+  const blockStyles = {
+    maxWidth: width <= 649 ? width : '100%'
+  }
+
+  /* fallback w325 url until w6 was released */
+  const fallbackSource =
+    (source && source[0]) ||
+    (optimized.w325 && optimized.w325['1x']) ||
+    optimized.original
+
+  return (
+    <div
+      className={makeClassName([
+        [styles.root, true],
+        [styles.fullscreen, fullscreen]
+      ])}
+      style={blockStyles}
+      data-testid="image"
+    >
+      <div
+        className={styles.wrapper}
+        style={pictureStyles}
+        onClick={(): void => handleClick()}
+        onKeyPress={(): void => handleClick()}
+        role="button"
+        tabIndex={0}
+      >
+        {lazy ? (
+          <>
+            <Lazy threshold={0.25}>
+              <RenderPicture
+                fallbackSource={fallbackSource}
+                source={source}
+                optimized={optimized}
+                alt={alt}
+                display={display}
+              />
+            </Lazy>
+            <noscript>
+              <img src={fallbackSource} alt={alt} />
+            </noscript>
+          </>
+        ) : (
+          <RenderPicture
+            fallbackSource={fallbackSource}
+            source={source}
+            optimized={optimized}
+            alt={alt}
+            display={display}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/src/Image/mock.json

@@ -0,0 +1,49 @@
+{
+  "image": {
+    "type": "image",
+    "data": {
+      "display": "default",
+      "width": 1335,
+      "height": 890,
+      "credit": "Николай Петров / BelTA / Reuters / Scanpix / LETA",
+      "cc": "default",
+      "only_on": "desktop",
+      "lazy": true,
+      "optimized": {
+        "original": "https://meduza.io/impro/F9JGhOM1jFAqUdaty5qKTlWHyOIax0jN_4YHLNftSbg/fill/2670/0/ce/0/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.jpg",
+        "w325": {
+          "1x": "https://meduza.io/impro/6sHhKtVZ9rcdvj-iASnXgoexdnDZlyMZ1z-brLKZ0sk/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.jpg",
+          "2x": "https://meduza.io/impro/B4jyVhfDLxy9-xzt7_6v1JxO1wfK-FUXi1m9DmYRPjg/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.jpg",
+          "1x_webp": "https://meduza.io/impro/-eaVF5oW8y2D95UzQWB44b5ObepgNuRAnm8eZtJLpIY/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.webp",
+          "2x_webp": "https://meduza.io/impro/sIhr8I9miVXXIQmgsWYsWqPWsnCc1m3eCxUwLspYk3E/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.webp"
+        },
+        "w520": {
+          "1x": "https://meduza.io/impro/PZlQXlGF_yh27PpHwslH1360tnQNGCfcaMp_0UjjnEI/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.jpg",
+          "2x": "https://meduza.io/impro/JpGXbnZWrU6rjVeghdkJwq1KN2zrjy062vBCKcovZ44/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.jpg",
+          "1x_webp": "https://meduza.io/impro/fIf2--kd58_Kc9bjhckO5Uo00Bjty9MH8gtLZhkseMg/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.webp",
+          "2x_webp": "https://meduza.io/impro/GT-iiL_QPziT59XeGCZF8YMLCQ4d4O7nOeGLv72htlk/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.webp"
+        },
+        "w650": {
+          "1x": "https://meduza.io/impro/B4jyVhfDLxy9-xzt7_6v1JxO1wfK-FUXi1m9DmYRPjg/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.jpg",
+          "2x": "https://meduza.io/impro/HtOvinjzMc7Ft4AQDz-V25ne6meOR48_FfOY8Kq5wzY/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.jpg",
+          "1x_webp": "https://meduza.io/impro/sIhr8I9miVXXIQmgsWYsWqPWsnCc1m3eCxUwLspYk3E/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.webp",
+          "2x_webp": "https://meduza.io/impro/ck1HxMsH_ekSQNBlpC2CYIOnPr_Yi9Te_3FnEXrq8wc/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.webp"
+        },
+        "w980": {
+          "1x": "https://meduza.io/impro/OGw8P4FJu8CBD5WCWNra0X4cjR3NHLHqvUwLNQosEJY/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.jpg",
+          "2x": "https://meduza.io/impro/SbjBdskXIIqBXEqABY-MjsosAqGIoslrDYqOLByOnU0/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.jpg",
+          "1x_webp": "https://meduza.io/impro/ADU6kdmUIwaylp2yYyVCm8DljP_sl0VcRX72ucNVlcw/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.webp",
+          "2x_webp": "https://meduza.io/impro/lzSF1aCboClzlJELl0DCxZmAga9R7NsyZxLVrE0BKUg/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.webp"
+        },
+        "w1335": {
+          "1x": "https://meduza.io/impro/dvyomaKo4UQnFydF116LzwyfbVMsRhvR2dccoBcMIvo/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.jpg",
+          "2x": "https://meduza.io/impro/19I4OdPJ_R5KT-YbZsjcr4X6tGAbilTIVlSVKqgMYLI/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.jpg",
+          "1x_webp": "https://meduza.io/impro/j-1Dij5eyRc7DpMwMQCplNlJPYfs3lCL0SlerWsWJFk/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.webp",
+          "2x_webp": "https://meduza.io/impro/NhyR_QN9S55r7O0v2Kd2imcdDUFj_umeixgqHXYxWNA/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/NzIvNjE5L29yaWdp/bmFsL0FDbnU4Yi1o/Y1JPaFJLOEhxdjdX/ZlEuanBn.webp"
+        }
+      }
+    },
+    "only_on": "desktop",
+    "id": "0-0e0eaf18c658ef60ad691d9115c61dd994a64361013efea29d52c08e027d8ed7"
+  }
+}