CSS Code Challenge

Your challenge is to build a(n) Accordion component. You need to use the :first-of-type selector at least once. You also need to use the shape-image-threshold, font-optical-sizing, and mask properties each at least once.

The Challenge

Click the "Generate Challenge" button to be presented with a random component to build. The generator will also give you one random CSS selector and three random CSS properties that you are required to use when styling your component.

The Rules

1. You have to incorporate the CSS selector and properties in a meaningful way. You can't just set it to the browser default and call it a day.
2. Some CSS properties require other properties to work. You should probably use those.
3. You can use as many other CSS selectors and properties as you want.
4. You can structure your HTML however you like but it should still match how the industry defines that component.
5. JavaScript is fine.
6. 3rd party JavaScript is also fine but 3rd party CSS is not allowed.