Single price grid component

Hello there! Awesome job with this one! Viewing your solution you did well with the design. I would only suggest the following for you...

• Change the color value of the background in .bottom__right into background: hsla(180, 39%, 56%, 1);
• Change the font color of the .bottom__right p into color: var(--light-gray);
• Wrap the container with specific tag like main
• Add a padding to the attribution in smaller view

Hope this helps and Keep up the good work!

Hay ! Good Job you made it look nearly perfect to the preview

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body like it should be your container

-> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

-> But use header tag only once in main heading element.

-> Always use h1 first and then h2, h3 and so on

Keep up the good work!

👋 Hello Mario , Your solution looks absolutely amazing on large screens & the card looks very responsive.

Some of my opinions to make it look nicer in small screens as well :

• use this styles in body

justify-content: center; */ remove this line it is of no use */
    min-height: 100vh;   */ so that for small screens body's height can increase*/ 
    grid-template-rows: 1fr auto; */ so that container & footer can be displayed without position relative*/
    gap: 2em; */ so that footer can have some spacing from the container*/
    padding: 4em 0; */ so that container can have some spacing from top without  using position relative & top*/

• remove the max-height from container
• remove position : relative & top from container & footer

Please keep up with this amazing work 👍