Responsive single price gird component using flexbox and grid

Hi, @ForbiddenShadow. That's a good solution. Keep coding. Here are some important tips.

1 - Don't use percentage units for your padding and margin values. This style creates many problems for future maintainers, and it's not legible. Use rem unit or clamp function instead of percentage.

I think the clamp function will be the default unit for padding and margin in the near future, to make the websites more responsive. You can check this function here: https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

And you can create fluid units from here: https://utopia.fyi/

2 - For more readable code, you can give your container four-sided padding values as consistently as possible:

padding: 2rem 1.5rem;

And you can give its children some space with margin-bottom like:

.item1 {
margim-bottom: 1rem;
}
.item2 {
margim-bottom: 1rem;
}
.item3 {
margim-bottom: 2rem;
}

3 - You can use unordered list ul and li tags for your .why-container part. These texts look like lists, so you can easily use ul and inside it li elements.

I hope these will help you. Keep coding and have a wonderful day.