@layer components {
    featured-testimonials {
        display: grid;
        gap: var(--size-7);

        :is(h2) {
            margin: 0;
        }

        & .testimonials-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            column-gap: var(--size-5);
            row-gap: var(--size-7);
        }

        & .testimonial-card {
              /* Have to override both media queries from testimonial-card in order to avoid 
              having 2 items on the first row and 1 item on the second row at 768px */

              /* tablet and up */
              @media screen and (min-width: 768px) {
                  flex: 1 1 25%;
              }
              /* desktop and up */
              @media screen and (min-width: 960px) {
                  flex: 1 1 25%;
              }
        }
    }
}