This is a Header
Love hearts sugar mice lemon drops, pear drops liquorice wine gums mint imperials rhubarb and custard coconut ice gobstoppers butterscotch parma violets. Bubblegum pear drops love hearts, bon bons mints jelly babies jelly beans chocolate caramels toffee boiled sweets pineapple chunks liquorice aniseed balls.
This is a Header
Seaside rock lemon drops toffee eclairs gobstoppers cola bottles barley sugar turkish delight parma violets vanilla fudge peppermint creams toffee mints sugar mice. Liquorice treacle toffee bubblegum, seaside rock marshmallow parma violets barley sugar vanilla fudge mints peppermint creams fruit pastilles gobstoppers nougat jelly beans toffee eclairs.
There are a couple of tricks here.
The photos are actually background images, which are in Container Blocks within Grid blocks. These Container blocks have been given a minimum height. On desktops and tablets, the two Containers inside the Grid block are set to 50%. For mobile devices, both Containers in the Grid are set to 100%. Padding is added to the Container holding the text.
Since I’m using background images, the sides of the photos will be cropped on some screen sizes.
For the second Grid, I wanted the photo to appear before the text on mobile devices, so have input an order of -10 for the Container block with the background image.
