Media block: add an ability to define different media types for different screen size breakpoints

[danonechik94]

The scenario is as follows: on a desktop size screen display a video, and on tablet/mobile display an image (different images). Right now the only possible solution is to turn video into an image and configure the media block like this:

  - type: 'media-block'
    animated: true
    mediaOnly: true
    title: '...'
    media:
        image:
            desktop: '{gif url}'
            tablet: '{tablet image url}'
            mobile: '{mobile image url}'

Although this will require a breaking change, this schema can be used in all media properties across several components. Here's the proposed change:

  - type: 'media-block'
    animated: true
    mediaOnly: true
    title: '...'
    media:
      desktop: 
        video: 
          src:
            - '{video url}'
            - '{video fallback image}'
      # by default use image type and get src from this field
      tablet: '{tablet image url}'
      mobile: 
        src: 
          - '{mobile image url webp}'
          - '{fallback mobile image url jpeg}'