Testimonials grid section

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

I am proud of learning how to use background-image:

.testimonial:nth-child(1) {
    background-image: url("./images/bg-pattern-quotation.svg");
    background-position: top 0px right 2em;
    background-repeat: no-repeat;
}

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

I faced some difficulty with spacing & positioning the testimonials to the center in the desktop view. But I managed it by creating 2 extra columns on each side to position the elements in the center.

@media (min-width: 376px) {
    main {
        display: grid;
        grid-template-columns: 0.7fr repeat(4, 1fr) 0.7fr;
        grid-template-rows: repeat(2, 1fr);
    }

    .testimonial:nth-child(1) {
    grid-column: 2 / 4;
    }

    .testimonial:nth-child(2) {
        grid-column-start: 4;
    }

    .testimonial:nth-child(3) {
        grid-column-start: 2;
    }

    .testimonial:nth-child(4) {
        grid-column: 3 / 5;
    }

    .testimonial:nth-child(5) {
        grid-column-start: 5;
        grid-row: 1 / 3;
    }
}

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

Responsive CSS techniques