Problem description

You have a container element with class .grid that lays out child <h2> headings and <p> paragraphs in a two-column CSS Grid layout. Your task is to implement a consistent vertical rhythm by:

1. Defining a CSS custom property --rhythm as 1.5rem.

2. Configuring the grid to have two equal columns and a row-gap equal to the rhythm unit.

3. Setting the line-height of all <h2> and <p> inside the grid to the rhythm unit.

4. Removing default margins on those text elements so vertical spacing relies solely on the grid row-gap.

Goal

Use only HTML and CSS to:

1. Define --rhythm as 1.5rem in :root.

2. Apply display: grid, grid-template-columns: repeat(2, 1fr) and row-gap: var(--rhythm) to the .grid container.

3. Set line-height: var(--rhythm) and margin: 0 on .grid h2, .grid p so each text element aligns perfectly with the grid rows.

Constraints

• Only CSS is allowed.

• Use rem units and CSS variables.

• CSS file must be named styles.css.

• Do not modify the HTML structure or use JavaScript.

• Rely on grid row-gap for spacing; do not use element margins for vertical spacing.

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.