Hey @casserole27, Great job on this challenge!
You can do the following to reduce the amount code needed and make your content fully responsive.
heightof each card to
min-height. This make each card responsive. Remove all the other
widthsfor the card components, you only the ones mentioned above.
You can remove the grid styling in each card, since by default, text is already aligned to the left and in a column. All you will need to do is use position absolute to position the icons (give all the icons the same class)
Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout; it will give you full control of the layout.
Some other suggestion:
The headline-wrapper should be a Header Element. Since this the introductory part.
The Main Element should only wrap the card components since this the area you want you users to focus on.
If anything is confusing or giving you a hard time, let me know.
Happy Coding! 👻🎃
Marked as helpful