Adjust cards component and card grid to the Drupal Design System

Problem/Motivation

For solving ✨ Make the overall design of the browse page more compact and dense Active and making the browse page more compact and dense, more design work has to happen, but as a starting point it might be a good first step to get the card component and card grid inline with the card component in the Drupal Design System.

• On mobile viewports the card component already has a drop shadow that is missing for the desktop viewports.
• The border color differs between the mobile and the desktop viewports as well
• The gap between the cards is at 1.5rem while the Design System sets it to 1em (which would already save a few pixels vertically and horizontally).
• The padding between the card border and the content within looks correct with 1.5em.

Steps to reproduce

Proposed resolution

• It should be checked if the dropshadow on the view port is in line with the drop shadow in the drupal design system and the drop shadow should also be applied to the desktop view port.
• It looks like the border color on the mobile viewport, the desktop viewport and the drupal design system are all unique, so the border color should be adjust in project browser and be consistent between mobile and desktop viewports.
• The gap between the cards should be adjusted to 1em (Spacer M)
• It could be explored if any other detail within the card component in the Drupal Design System makes sense to be applied in the context of a module card component.

The direct link to the card component.