I’m facing a problem while creating an interface using HTML, SCSS, and JS. I am a beginner in frontend development, and I designed an interface on Figma, drawing everything by hand. However, the SVG waves that are part of container-item-2 do not adapt and do not respect the size of the parent container.

Here is the GitHub link to my project: GitHub – OteroDev/codpanel

I have attached two images for reference:

The design in Figma (expected design).
A screenshot of the page (current implementation).

I am extremely demotivated and frustrated because I can’t resolve this issue. I managed to code all the other designed screens, but the simplest one, which is the login screen, just doesn’t work at all.

Any help would be greatly appreciated.

Thank you in advance!

What I Tried:

CSS Flexbox: I tried using flexbox to control the layout, hoping it would help the SVG adapt to the container size.
CSS Grid: I also experimented with CSS grid to see if it would provide better control over the placement and sizing of the SVG within the container.
Viewport Units: I used viewport width (vw) and height (vh) units in the SVG dimensions, expecting them to scale with the window size.
Responsive Media Queries: I added media queries to adjust the SVG size at different screen sizes.
Object Fit and Position: Tried object-fit and object-position properties to see if they could help in fitting the SVG within the container.
What I Expected:
I expected the SVG waves to resize and adapt proportionally to the parent container, maintaining the design as shown in the Figma prototype.

What Actually Happened:
The SVG waves did not scale properly with the parent container. Instead, they either overflowed or got clipped, and their positioning was off, not aligning as intended in the Figma design.

Any help would be greatly appreciated.