As I have created 2 divs inside each section elements where the span tag contains the icons and the title of the grid which would be remain visible until the user triggered any action over it .
For the second div , it would contains the content which would be visible whenever the user clicks over the grid.
Now for styling these grid , I have applied some CSS to it added with the media query at various breakpoints .
Now to the outer most div with the id as services and class clear as we need to put the grid in the left direction , so we need to float them to left .
To the outer div , I have set min-height with overflow as hidden and the width as 33 % such that there would be 3 columns at the desktop size , 2 column and 1 column as we keep decreasing the screen size .
Now moving forward , I have set service-icon and service-description. As position absolute . I have made its height and width to 100% and made its position set to left .
Now moving towards the @font-face for icon font , I have used fontastic and used it in my CSS .Below is the code for it :-