FAQ accordion solution

This is a solution to the FAQ accordion challenge on Frontend Mentor.

Built with

Semantic HTML5 markup (<details> / <summary> for native accordion semantics)

SASS/SCSS with modular architecture (variables, mixins, BEM naming)

CSS Grid (for layout and the 0fr → 1fr accordion animation)

Flexbox (for component alignment)

Progressive enhancement (core functionality works without JavaScript)

Vanilla JavaScript (single-open behavior and keyboard navigation)

Mobile-first responsive workflow

CSS logical properties (inline-size, block-size, padding-block)

prefers-reduced-motion media query for accessibility

Architecture

The SCSS is organized by concern following a standard component architecture:

scss/

├── abstracts/ # Variables (design tokens) and mixins (mq, focus-ring)

├── base/ # Fonts, resets, and global element styles

├── components/ # Self-contained UI blocks (faq-card, accordion)

├── layout/ # Page-level shell (backdrop, centering)

└── main.scss # Entry point — imports everything in order