Testimonial grid section

Hello community,

This is my solution for the testimonials grid section. I got more familiar with CSS Grid and the mobile-first approach.

Questions:

• I want to create smooth animation for columns between mobile view and desktop view. For this, I assigned the following properties to the grid parent:

.grid-layout {
  display: grid;
  grid-template-columns: 1fr;
  transition: grid-template-columns ease-out 0.3s;
}

Media query for the grid parent:

@media (min-width: 950px) {
 .grid-layout {
    grid-template-columns: repeat(4, 1fr);
  }
}

But it doesn't work. How can I fix this?

• Does anyone know ways how to create screen capture gifs quickly and easily? I would appreciate any hints.

I'll be happy to hear any feedback and advice! Thank you in advance.