Problem description

Given a <section class="fullscreen-section"><input type="radio" ...><div class="slides"><div class="slide"></div>...</div><div class="nav"><label for="slideX">...</label></div></section> structure, write CSS to create a fullscreen, CSS-only content switcher where:

• The section spans the entire viewport and hides overflow.

• Each .slide fills the viewport but only the selected one is shown.

• The selection is controlled by hidden radio buttons; when a radio is checked, the corresponding .slide becomes visible.

• The .nav is positioned at the bottom center and contains labels styled as interactive buttons.

• Clicking a label switches to the associated slide.

Goal

Build a fullscreen CSS-only slider/carousel with horizontal transitions.

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.