🔥🔥🔥 Responsive news homepage using React

This is my first exercise using React. I tried to keep elements tidy and separated into tiny components. I would love to hear any comment on my page or coding. Thanks for your help.

What I learned:

• CSS Grid and Flexbox. Use grid-template-column: 1fr 1fr 1fr to keep columns or rows in same ratio.
• Responsive image using <picture> to switch imgage source.
• Use the silbling selector (~) to link up the active state of navigation button and the following classes. (When a nav button is activated, the related CSS should be followed)

.nav-menu.active {
transform: translateX(0);
transition: all 200ms ease-in-out;
}

.nav-menu.active ~ .background {
width: 100%;
opacity: 0.5;
}