Article preview component | Sarfaraz

Hello!

Looks good to me. Nice use of semantic elements, JS code looks fine.

I would change this, though

* {
  --very-dark-grayish-blue: hsl(217, 19%, 35%);
  --desaturated-dark-blue: hsl(214, 17%, 51%);
  --grayish-blue: hsl(212, 23%, 69%);
  --light-grayish-blue: hsl(210, 46%, 95%);
  --font-family: Manrope;
  -webkit-tap-highlight-color: transparent;
}

with

:root {
  --very-dark-grayish-blue: hsl(217, 19%, 35%);
  --desaturated-dark-blue: hsl(214, 17%, 51%);
  --grayish-blue: hsl(212, 23%, 69%);
  --light-grayish-blue: hsl(210, 46%, 95%);
  --font-family: Manrope;
  -webkit-tap-highlight-color: transparent;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Keeping the variables inside of ":root" selector and doing the basic reset in "*" selector.

Best of luck!