Landscape image with focus in center
Image Size(2x): 1400x1600
Landscape video with focus in center
Desktop: full screen width/height
Mobile/Tablet: adjusted under content
Landscape image (focus does not matter)
Image Size(2x): 2200x1600
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci aliquam aspernatur aut culpa debitis dignissimos enim exercitationem, fugiat illum ipsum laboriosam laudantium molestiae mollitia neque odit provident quaerat quos, rem repellat similique tempora voluptatem! Dignissimos incidunt iusto quia quisquam.
Img1: square image (focus does not matter) / Size(2x): 1100x1100
Img2: should be square image - focus in center / Size(2x): 1100x1600
Potential problem
on resize middle image can't keep side people in focus
Solution
Keep middle image change in proportions but it will not looks same as in the design and maybe we need to have 2 image fields in admin panel to have for Desktop and Mobile as they are is different
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci aliquam aspernatur aut culpa debitis dignissimos enim exercitationem, fugiat illum ipsum laboriosam laudantium molestiae mollitia neque odit provident quaerat quos, rem repellat similique tempora voluptatem! Dignissimos incidunt iusto quia quisquam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci aliquam aspernatur aut culpa debitis dignissimos enim exercitationem, fugiat illum ipsum laboriosam laudantium molestiae mollitia neque odit provident quaerat quos, rem repellat similique tempora voluptatem! Dignissimos incidunt iusto quia quisquam.
Image / Video should be square
focus does not matter
Image Size(2x): 2000x2000
Potential problem
Too many content in right column will stretch video/image left
Solution
Maybe add scrollbar to right column
Node: Accordion design we don't have mobile for that so we don't need to think about different views
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum luctus dolor at consectetur. Nulla at enim dui. Quisque eu enim imperdiet, porttitor dolor eu, tristique nisl. Sed semper leo quis auctor tincidunt. Nunc faucibus, massa vel semper convallis, urna velit faucibus est, et varius est lacus id nibh.
Image / Video should be square
focus does not matter
Image Size(2x): 2800x2800
Potential problem
Too many content in right column will stretch video/image left
Solution
Maybe add scrollbar to right column
Node: Accordion design we don't have mobile for that so we don't need to think about different views
Image / Video should be landscape
focus in center - depends on the image
Image Size(2x): 2600x1200
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum luctus dolor at consectetur. Nulla at enim dui. Quisque eu enim imperdiet, porttitor dolor eu, tristique nisl. Sed semper leo quis auctor tincidunt. Nunc faucibus, massa vel semper convallis, urna velit faucibus est, et varius est lacus id nibh.
Image / Video should be landscape
Desktop: focus in center - depends on the image
Image Size(2x): 2600x1200
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum luctus dolor at consectetur. Nulla at enim dui. Quisque eu enim imperdiet, porttitor dolor eu, tristique nisl. Sed semper leo quis auctor tincidunt. Nunc faucibus, massa vel semper convallis, urna velit faucibus est, et varius est lacus id nibh.
Image / Video should be portrait
Desktop: focus in center
Image Size(2x): 1400x1600