Problem description

Given an HTML page with a testimonial section containing two main elements:

• A <div class="testimonial-carousel"> that wraps multiple <div class="testimonial-item"> elements (each containing .testimonial-text and hidden .author-photo)

• A <div class="testimonial-grid"> that wraps multiple <div class="testimonial-item"> elements (each containing .testimonial-text and an <img class="author-photo" src="...">, hidden by default)

Write CSS to ensure the layout adapts responsively across three breakpoints: mobile, tablet, and desktop.

• Mobile view (viewport width less than 600px):

  • The .testimonial-carousel component should be visible.

  • The .testimonial-grid component should be hidden.

  • Inside .testimonial-carousel, the .author-photo element must remain hidden, ensuring a simplified layout for smaller screens.

• Tablet view (viewport width between 600px and 899px):

  • The .testimonial-grid component should be visible and arranged into two columns for balanced readability.

  • The .testimonial-carousel component should be hidden to avoid duplication.

  • Within .testimonial-grid, the .author-photo element must continue to remain hidden for a cleaner, more compact display.

• Desktop view (viewport width 900px and above):

  • The .testimonial-grid component should be visible and arranged into three columns, making use of the wider screen real estate.

  • The .author-photo element should now be displayed, adding visual depth to the testimonials.

  • The .testimonial-carousel component should remain hidden.

Goal

Implement a testimonial section that provides a swipeable carousel on mobile, a two-column grid on tablet, and a three-column grid with photos on desktop, enhancing user engagement and readability across devices.

Constraints

• Only use CSS; do not modify HTML or use JavaScript.

• Breakpoints are exactly 600px and 900px.

• The .testimonial-carousel and .testimonial-grid elements should occupy the same container space, but only one is visible at a time.

• Grid gaps should be 16px on tablet and 24px on desktop.

• .author-photo elements are hidden by default and only shown on desktop within .testimonial-grid.

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.