Style a Card

Style a card component using CSS. Replace this with your assignment instructions.

Requirements

Use flexbox for layout
Add a hover effect
Make it responsive

Starter code

Start from this stylesheet. It sets up the card's box and text styles, which are folded below, and leaves the layout and hover effect for you:

.card {
  box-sizing: border-box;
  max-width: 320px;
  padding: 1.5rem;
  border: 1px solid #d0d7de;
  border-radius: 12px;
  background: #ffffff;
  font-family: system-ui, sans-serif;
}
10 collapsed lines
.card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}
.card p {
  margin: 0;
  color: #57606a;
  line-height: 1.5;
}
/* TODO: lay out the image and text with flexbox */
/* TODO: add a hover effect */