:root {
      --purple-50: hsl(260, 100%, 95%);
      --purple-300: hsl(264, 82%, 80%);
      --purple-500: hsl(263, 55%, 52%);
      --white: hsl(0, 0%, 100%);
      --grey-100: hsl(214, 17%, 92%);
      --grey-200: hsl(0, 0%, 81%);
      --grey-400: hsl(224, 10%, 45%);
      --grey-500: hsl(217, 19%, 35%);
      --dark-blue: hsl(219, 29%, 14%);
      --black: hsl(0, 0%, 7%);
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      flex-direction: column;
      font-family: 'Barlow Semi Condensed', sans-serif;
      font-size: 13px;
      background-color: var(--grey-100);
      color: var(--grey-500);
      line-height: 1.5;
      padding: 4rem 1.5rem;
      min-height: 100vh;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .testimonial-grid {
      display: grid;
      gap: 1.5rem;
      grid-auto-columns: 1fr;
      grid-template-areas:
        'daniel'
        'jonathan'
        'jeanette'
        'patrick'
        'kira';
    }
    
    .testimonial {
      padding: 1.5rem 2rem;
      border-radius: 0.5rem;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }
    
    .testimonial-header {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
    }
    
    .testimonial-avatar {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      margin-right: 1rem;
      border: 2px solid var(--purple-300);
    }
    
    .testimonial-name {
      font-weight: 600;
    }
    
    .testimonial-status {
      opacity: 0.5;
      font-size: 0.85rem;
    }
    
    .testimonial-highlight {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 1rem;
      line-height: 1.2;
    }
    
    .testimonial-quote {
      opacity: 0.7;
    }
    
    /* Individual testimonial styles */
    .testimonial-daniel {
      grid-area: daniel;
      background-color: var(--purple-500);
      color: var(--white);
      background-image: url('./images/bg-pattern-quotation.svg');
      background-repeat: no-repeat;
      background-position: top right 1.5rem;
    }
    
    .testimonial-jonathan {
      grid-area: jonathan;
      background-color: var(--grey-500);
      color: var(--white);
    }
    
    .testimonial-jeanette {
      grid-area: jeanette;
      background-color: var(--white);
    }
    
    .testimonial-patrick {
      grid-area: patrick;
      background-color: var(--dark-blue);
      color: var(--white);
    }
    
    .testimonial-kira {
      grid-area: kira;
      background-color: var(--white);
    }
    
    /* Desktop layout */
    @media (min-width: 768px) {
      .testimonial-grid {
        grid-template-areas:
          'daniel daniel jonathan kira'
          'jeanette patrick patrick kira';
      }
    }
    
.attribution {
      font-size: 1rem;
      text-align: center;
      margin-top: 2rem;
 }
    
 .attribution a {
      text-decoration: none;
      background: linear-gradient(to left, hsl(263, 55%, 52%),hsl(264, 82%, 80%),hsl(263, 72%, 35%));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;;
      font-weight: bolder;

}