Adaptive layout af four card component page

Executed challenge gived by Front End Mentor program

While execute that challenge, faced with such problem as:

1.Problem:

---

How to make width of 4 card and distance between a same.

---

Solution:

---

I set fix grid-container's width using max-width for responsive layout, set the grid-template-columns: repeat(3, 1fr) ans set gap: 3.5rem on container.

---

2.Problem: Faced with making colorful top borders of the cards have a width less then cards' length.

---

Solution:

• Making .card::after, it's important to set content: ' ' (' ', not ''!), otherwise ::after won't appear.
• The card's background should be set even it white, otherwise even you specify z-index: -1 to ::after you'll all-one see border behind card. .card{ position: relative; border-radius: 5px; box-sizing: border-box; padding: 2.6rem 2.3rem; width: 100%; min-height: 18rem; box-shadow: 0px 7px 30px -10px var(--grayish-blue-color); background-color: var(--white-color); .card::after { content: ''; border-top-width: 10px; display: block; position: absolute; top: -4px; z-index: -1; left: 0.2rem; right: 0.2rem; border-radius: 100px; }

Problem and solution shared

However, i'd like to have card's height leveled off depending on cards with biggest paragraph row num, so with biggest height

Any idea what easy animations i can add to project👏