Responsive Social Proof Section using CSS Flexbox and Grid

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

I was able to practice creating layouts using CSS Flexbox and Grid. To master may layout skills, I will continue to learn more about CSS Flexbox and Grid.

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

One challenge that I have encountered is how to implement the staggered layout of the reviews and the testimonials. To give me some insights on how to implement it, I used AI to give me some approaches on how to implement it. I also tried to remember some of the flexbox and grid CSS properties that I can use and I have found out that you can position a flex or grid item individually using align-self or justify-self.

.reviews__item:nth-child(1) {
  align-self: flex-start;
}

.reviews__item:nth-child(2) {
  align-self: center;
}
.reviews__item:nth-child(3) {
  align-self: flex-end;
}

I also used the CSS transform property for the testimonials staggered layout.

.testimonials {
  grid-template-columns: repeat(3, 1fr);
}

.testimonials__card:nth-child(2) {
  transform: translateY(clamp(0rem, -2.4615rem + 3.8462vw, 1rem));
}

.testimonials__card:nth-child(3) {
  transform: translateY(clamp(0rem, -4.9231rem + 7.6923vw, 2rem));
}

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

I would like help on improving my HTML markup. Are there better semantic html elements that I can use for the review and the testimonial cards?

As usual, any feedbacks and recommendations are welcome!