Distorted Container on Tablet and Mobile Version - html

Question

I just can't get it to work so that the images of the planets and the text within the Glassmorphism don't get distorted on tablet and mobile view and completely break the image. I am a complete novice who has thrown together a few code snippets and try to do it by my own. Please help me adjust the code so that it works.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #000;
}
.container {
max-width: 500px;
width: 100%;
padding: 0 4%;
padding-top: 65px;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
width: 100%;
height: 250px;
position: relative;
}
.card {
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
position: absolute;
box-shadow: 20px 20px 25px rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
}
img {
width: 60%;
position: absolute;
right: 290px;
bottom: -100px;
}
.shape {
width: 80%;
position: absolute;
right: -150px;
bottom: 50px;
}
.text-container {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
width: 65%;
height: 100%;
left: 40px;
top: 0;
bottom: 0;
}
.text-container h2 {
margin-bottom: 2px;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 50px;
letter-spacing: 3px;
}
.text-container p {
font-size: 18px;
color: #d5d5d5;
font-family: "bergen mono";
font-weight: 300;
letter-spacing: -1px;
line-height: 20px;
text-align: justify;
}
a {
display: block;
width: 100%;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-weight: 500;
position: relative;
margin-top: 50px;
background-color: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
border-radius: 5px;
text-decoration: none;
text-align: center;
padding: 15px 0;
box-shadow: 20px 20px 25px rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255, 255, 255, 0.06);
}
a > .fab {
font-size: 20px;
color: #000;
}
<div class="container">
<div class="wrapper">
<img src= "https://mathias-mastert-podcasts.com/wp-content/uploads/2022/05/simon-lee-XnGxTBij48Q-unsplash.png">
<img class="shape" src="https://mathias-mastert-podcasts.com/wp-content/uploads/2022/05/simon-lee-ozVwowRmSwM-unsplash.png" alt="">
<div class="card">
<div class="text-container">
<h2>STORE</h2>
<p> Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, LoremLorem ipsum dolor sit ametipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>