NFT Preview Card Component

Hello, @homoki76. How are you?

You don't need the <div class="wrapper"> element. <main> is working as a wrapper here.

You have given fixed widths to the .wrapper and .container elements, which is blocking the responsiveness of the container. You should only put a max-width: value; on the wrapper element and let the children adjust themselves to the wrapper elements.

These're changes i'd do in your exisiting code...

.wrapper {
    max-width: 100%;
    padding: .5rem 1rem; 
}

.container {
   max-width: 100%;   // want the container to be 100% width of the wrapper
}

.image-container, .bg-image-container {
   width: 100%;   // want the image container to be 100% width of container.
}

• The nft image is a descriptive image, means it provide meaning to the content. Therefore, you shouldn't use it as a background image. You should've used <img> element here and provide an apt alt text for screen reader users.

I wrote a little demo to demonstrate how you could create the overlay effect using pseudo elements. You can read the code in demo for a different perspective. https://codepen.io/pradeeps4ini/pen/yLKbRqB