Problem description

Given a <section class="fullscreen-section"><div class="left"></div><div class="right"></div></section>, write CSS so the section is always fullscreen and is divided vertically into two halves. The .left and .right divs should each take 50% width, different backgrounds, and center their own content.

Goal

Achieve a responsive split-screen hero with centered content in each half.

Constraints

• No JavaScript is allowed.

• Do not modify HTML.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.