Work while crying.. no time!!

Hi @Khalid-debugg your solution is allright to make it look the same accross difrent screen sizes u need to remove fixed positioning properties for .containner and diplay flex to the body like this:

   body{height: 100vh;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;}  

AND REMOVE .container { /* width: 87%; */ /* border-radius: 15px; */ /* margin: 100px auto; */ }

-To make setting up box shadow easier here is tool https://html-css-js.com/css/generator/box-shadow/.

Hope this help 😊

👾 Hello GIGACHAD, congratulations for your solution!

Answering your question about media queries:

Fortunately in this challenge you don't need media queries, all you can do is make your component responsive to allow changes when the screen scales until the mobile version.

Media query is used to allow changes to an element when a the window reaches some width, for example 768 for tablet and 375px for mobile.

When you set media query all the properties you insert inside the @media make the elements changes when reaches the breakpoint. If you want to apply a media query for this challenge, here's one example, you can change the pricing flex-direction when the container reaches width 280px.

See the example code below:

@media (max-width: 280px) {
.annual {
    display: flex;
    align-items: center;
    flex-direction: column;
}}

More info about media query: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Hope it helps, happy coding!