Styling the options sidebar

Now, let's style our filtering options. These appear just before the markup for our product items. In small, medium, and large viewports, they appear as a left-hand sidebar.

At the moment, they appear like the following screenshot:

For our final design, we want to transform the Clearance Sale link into an attractive extra-large button and arrange the filtering options into two columns with checkboxes rather than bullets, as shown in the following screenshot:

Let's begin by setting up some basic styles to lay a basic groundwork.

Setting up basic styles

We'll start by adjusting fonts, colors, margins, and padding.

Let's add these rules to a new Sass partial called _grid-options.scss:

.grid-options { 
  @extend .card; 
  padding-top: 12px; 
  padding-bottom: 24px; 
  > h2 { 
    margin-top: 0; 
    font-size: 1.3 * ($font-size-lg); 
    line-height: 1.2; 
    color: $gray-dark;   
  } 
} 

The preceding code does...