NFT preview card component

Hey good solution.

Small suggestions for improvement:

• the min function always uses the smaller value and this gives you a distance when viewing the mobile phone
• with object-fit you can prevent your images from distorting

The improved CSS:

.card-nft{
    width: min(375px, 90dvw);
}

img{
    object-fit: cover;
}


/* possible solution for the turquoise background: */
.card-nft-header {
    position: relative;
    transition: .75s all;
}

.card-nft-header::before {
    width: 100%;
    background: var(--primary-cyan);
    top: 1px;
    height: 100%;
    position: absolute;
    border-radius: 1rem;
    content: "";
    opacity: 0;
}

.card-nft-header:hover::before {
    opacity: 1;
    transition: .75s all;
}

Happy Coding 😉