Feature: Responsive layout

Scenario: Desktop browser

Given I'm using the site with a desktop browser, such as on a Macbook Pro
When I'm viewing the front page
Then the layout should appear with three columns

Scenario: Tablet browsing, horizontal

Given I'm using the site with a tablet browser, such as on an iPad
And I'm holding the tablet in horizontal mode
When I'm viewing the front page
Then the layout should appear with three columns

Scenario: Tablet browsing, vertical

Given I'm using the site with a tablet browser, such as on an iPad
And I'm holding the tablet in vertical mode
When I'm viewing the front page
Then the layout should appear with two columns

Scenario: Mobile browsing, horizontal

Given I'm using the site with a mobile browser, such as on an iPhone
And I'm holding the phone in horizontal
When I'm viewing the front page
Then the layout should appear with two columns

Scenario: Mobile browsing, vertical

Given I'm using the site with a mobile browser, such as on an iPhone
And I'm holding the phone in vertical mode
When I'm viewing the front page
Then the layout should appear with one column