Article preview component

What are you most proud of, and what would you do differently next time?

I am proud of how I Used absolute Positioning and z-index to create the toast, while having the button still appear on mobile.

.card {
  position: relative;
}
.share-links {
  position: absolute;
  bottom: 0;
}
.share-btn {
  z-index: 1;
}

What challenges did you encounter, and how did you overcome them?

One issue I faced was inverting the share button color. Since i loaded the svg as an image i had to use a trick I found on stackoverflow to change it through css,

.share-btn-dark {
  --share-btn-color: brightness(0) invert(1); /*used with filter*/

What specific areas of your project would you like help with?

I encountered one issue with overflow that I could not figure out how to solve gracefully. I initially had overflow on the card itself enabled, but this led to an issue with the toast being cut off. But using overflow on the image container for the header image did not work either for some reason. So I just added additional border radius to the image and share links container. Is there a way to handle this better while still keeping the border radius of the card intact (not having the internal containers overflow)? Otherwise, any additional criticism is welcome.