Fluid animated Blog Preview Card

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

In this exercise, I used fluid fonts and margins, instead of media queries. For example, to accommodate very small viewports, I want the margins to gradually disappear and the font size to shrink:

const Wrapper = styled.article`
  // From 0 to 24px on screens below 375px
  margin-inline: clamp(0rem, -7.5rem + 37.5vw, 1.5rem);
`;

const Title = styled.h1`
  // Grow from 20 to 24px on vewports between 375 to 450px */
  font-size: clamp(1.25rem, 0rem + 5.333vw, 1.5rem);
`;

Another new thing was the animation. I didn't want the shadow to disappear instantly in the active state but to subtly move under the card. It was pretty simple to achieve with the transition of the filter property.

const Wrapper = styled.article`
  --shadow-offset: 8px;
  filter: drop-shadow(
    var(--shadow-offset) var(--shadow-offset) 0 var(--color-black)
  );
  transition: filter 200ms;
  
  &:hover {
    --shadow-offset: 0;
  }
`;