Four card feature section challenge utilizing grid

What are you most proud of, and what would you do differently next time?

I learned a lot more about how to utilize clamp functions and get my designs to look more appealing with it. I also got to finally use grid areas in a project, instead of doing everything with flex. Next time i will try to focus more on responsiveness for fonts and spacings instead of just getting the figma design exactly right.

What challenges did you encounter, and how did you overcome them?

I actually had to do some research on how to stop the colored border from curving with my border radius. I found a clever solution on [stackoverflow]((https://stackoverflow.com/questions/57153309/how-to-prevent-single-sided-border-from-wrapping-around-border-radius), which I adjusted for this project.

.card {
  border-top: 4px solid transparent;
  background: linear-gradient(
        var(--border-color, black),
        var(--border-color, black)
      )
      top/100% 4px border-box no-repeat,
    var(--white);
}

[data-card="1"] {
  grid-area: card1;
  --border-color: var(--cyan);
}

What specific areas of your project would you like help with?

I am especially interested on how others approached the layout change across devices and if there are other solutions than doing it with grid and media queries. I also welcome feedback on my general css structure, especially in terms of best practices.