Single Price Grid Component with CSS Grid

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

I'm proud of being able to use CSS Grid to accomplish the component versus Flex. I definitely use Flex more because I am more comfortable with using it - so using Grid helped to challenge me with completing the component. Another thing that I'm proud of is actually using Paint 3D and the Photo tool with Windows to markup the design files to get the layout that I wanted to achieve with Grid. It is definitely something that I should've used earlier to get better at visualizing and creating layouts with Flex and/or Grid.

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

I wonder if a media query was necessary to get the components to wrap at smaller screen sizes. I did the following to make the components take up all the available space on mobile screen sizes:

@media (width < 426px) {
  .wrapper {
    margin-block: 1rem; 
    & > * {  grid-column: span 2; }
  }
}

What I tried was to initially do was grid-template-columns: repeat(auto-fit, minmax(320px, 1fr); to get it to wrap, but found that the components would not wrap or some components (specifically the pricing) would end up larger than the others. Is there a better function or unit to use inside the repeat() function to accomplish the mobile design without a media query?