Your job is to create some CSS variables and give them values.

The styles for this component are purposely placed inside the style tag in the HTML editor. The editor is locked, so you can only edit the styles where the CSS variables are set up.

The values for the variables are in pixels and should be multiples of 10. Below are the possible variable names:

container-width,
container-padding,
item-gap,
border-radius

This is an extra challenge to help you practice and strengthen your skills with CSS Custom Properties.

Solution

The solution to the challenge will be available in a few minutes. Use it if you encounter difficulties. In the meantime, try to complete the challenge on your own.

:root {
  --container-width: 300px;
  --container-padding: 20px;
  --item-gap: 30px;
  --border-radius: 10px;
}