Frontend practice with catalog page

Create HTML page with catalog. Develop semantic page structure as shown on the mockup.

use Header, Stars and Card blocks from previous tasks but rewrite them using BEM and SCSS
remove old data-qa attributes
add data-qa="nav-hover" (not just hover) to the 4th nav link for testing (Laptops & computers)
add data-qa="card" to the first card
add data-qa="card-hover" (not just hover) to the link Buy inside the first card
nav links color is not black any more (nav links should have #060b35 color)
add class is-active to the first link (Apple) in navigation
use <main> tag for cards container
use grid for cards with different number of columns:
- 1 for the smaller screens
- 2 starting at 488px
- 3 starting from 768px
- 4 starting from 1024px
cards have fixed width - 200px
gap between cards should be - 46px horyzontally and 48px vertically
cards container(catalog) have fixed paddings (50px vertically and 40px horyzontally)

Make all the changes smooth on hover (during 300ms):

increase the card by 20 percent (neighboring cards should not be affected)
change the card title text color to #34568b when the card is hovered (.card:hover .card__title)
change navigation link text color to #00acdc
change the button background to #fff and text color to #00acdc on hover

Here are the Layout Tasks Instructions

Checklist

❗️ Replace <your_account> with your Github username and copy the links to Pull Request description:

❗️ Copy this Checklist to the Pull Request description after links, and put - [x] before each point after you checked it.