Responsive Testimonial Grid (HTML, SASS) w/ Animation

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

I had fun exploring using grid, animation and the capabilities of using SASS.

I'm proud of the feature I built where, if we want to add a new set of card variants, we can simply define a new object in a SASS variable. SASS will then automatically generate the corresponding CSS rules based on those values. After that, we can just apply the new class in the HTML to use the new variant.

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

For css animation fill mode forward. Don't include in the keyframes the properties that will also be used in hover effect and etc. Due to it overlapping, it will not have any effect in the hover effects. (I was stuck here for 2 hours.)

/* Dont do this if we want to use transform in the hover */
.card {
   opacity: 0;
   transition: transform 0.2s ease-in-out;
   animation: fade-in--forward 0.5s ease-in-out forwards;
}

/* This will not work, due to transform property is included in keyframe with fill mode forwards */
.card:hover {
   transform: scale(1.05);
}

@keyframes fade-in--forward {
   from {
      opacity: 0;
      transform: translateX(-10%);
   }
   to {
      opacity: 1;
      transform: translateX(0%);
   }
}

/***********************************************************/

/* Do this instead */
.card {
   opacity: 0;
   transition: transform 0.2s ease-in-out;
   animation: fade-in--forward 0.5s ease-in-out forwards, offset-left-to-origin
         0.5s ease-in-out;
}

.card:hover {
   transform: scale(1.05);
}

/* With fill mode forward */
/* We will not be able to use opacity in other area, like hover and etc for the card class.
   which is ok in this case, but we do want the transform effect in hover. */
@keyframes fade-in--forward {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

/* Without fill forward. So that we will be able to use the transform in hover */
@keyframes offset-left-to-origin {
   from {
      transform: translateX(-10%);
   }
   to {
      transform: translateX(0%);
   }
}

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

Anything! I'm open for improvement.