Your card isn't shrinking based on the browser with because only max-width is set. When you use max-width, you're telling the browser that the element that it should use all of the available space until the element hits the max-width.
If you would like the element width to be proportional to the browser width (until it hits the max-width) you can use the width property along with max-width.
For example, you could set the width to 80% and then the element would take up 80% of the available space until it hits your max-width value and then it will stop growing.
If you choose to go that route, you would need to update the width property on your course-img to be dynamic (i.e. a percentage) because that currently has a fixed width.
0
