*{
    padding: 0;
    box-sizing: border-box;
    margin: 0;
}
@import url('https://fonts.google.com/specimen/Barlow+Semi+Condensed:wght@500;600');
body{
    font-family: 'Barlow semi condensed', sans-serif;
    background-color: hsl(215, 50%, 95%);
}
.attribution { 
    font-size: 11px; text-align: center;
 }
.attribution a {
     color: hsl(228, 45%, 44%);
 }
 .testimonials{
    padding: 5rem;
    display: grid;
    gap: 2rem;
 }
 .card-1{
    padding: 1rem;
    background-color:  hsl(262, 82%, 80%);
    color:hsl(260, 100%, 95%);
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    gap: 1rem;
 }
 .profile img{
    border-radius: 50%;
    border: 2px solid hsl(0, 0%, 100%);
 }
 .text-content{
    margin-top: 1rem;
 }
 .text-content p{
    font-size: 11px !important;
 }
 .text-content h4{
    font-size: 13px;
 }
.card-body{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
 .card-1 {
  h3{
      font-size: 13px;
      line-height: 1rem;
   }
   p{
      font-size: 12px;
      line-height: 1.2rem;
   }

 }
 .header-content{
    display: flex;
    gap: 1rem;
    background-image: url(images/bg-pattern-quotation.svg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 80px;
 }
 .bg-logo{
display: none;
 }

 /* testimonial 2*/
 .card-2{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: hsl(217, 19%, 35%);
    padding: 1rem;
    color: hsl(0, 0%, 100%);
    border-radius: 4px;
 }
 .header-content-2{
    display: flex;
    gap: 1rem;
 }
 .profile-2 img{
    border-radius: 50%;
 }
 .text-content-2{
    margin-top: 1rem;
 }
 .text-content-2 p{
    font-size: 11px !important;
 }
 .text-content-2 h4{
    font-size: 13px;
 }
 .card-body-2{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
 .card-body-2{
  h3{
      font-size: 14px;
      line-height: 1rem;
   }
   p{
      font-size: 12px;
      line-height: 1.2rem;
   }
 }

 /* Card 3*/
 .card-3{
    display: flex;
    flex-direction: column;
    gap:1rem;
    background-color: hsl(0, 100%, 100%);
    padding: 1rem;
    border-radius: 4px;
    color: hsl(224, 10%, 45%);
 }
 .text-content-3{
    margin-top: 1rem;
 }
 .header-content-3{
    display: flex;
    gap: 1rem;
 }
 .header-content-3 h4{
    font-size: 13px;
 }
 .header-content-3 p{
    font-size: 12px;
 }
 .profile-3 img{
    border-radius: 50%;
 }
 .card-body-3{
    display: flex;
    flex-direction: column;
    gap: 1rem;
 }
 .card-body-3{
  h3{
      font-size: 14px;
      line-height: 1rem;
   }
   p{
      font-size: 12px;
      line-height: 1.2rem;
   }
 }

/* Card 4*/
.card-4{
   display: flex;
   flex-direction: column;
   gap: 1rem;
   background-color: hsl(219, 29%, 14%);
   padding: 1rem;
   border-radius: 4px;
   color:  hsl(0, 0%, 100%);
}
.header-content-4{
   display: flex;
   gap: 1rem;
}
.header-content-4 p{
   font-size: 12px;
}
.text-content-4{
   margin-top: 1rem;
}
.header-content-4 h4{
   font-size: 13px;
}
.profile-4 img{
   border-radius: 50%;
   border: 4px solid hsl(263, 55%, 52%);
}
.card-body-4{
   display: flex;
   flex-direction: column;
   gap: 2rem;
}
.card-body-4{
  h3{
      font-size: 14px;
      line-height: 1.2rem;
   }
   p{
      font-size: 12px;
      line-height: 1.2rem;
   }
}
/*Card 5*/
.card-5{
   display: flex;
   flex-direction: column;
   gap: 1rem;
   background-color:hsl(0, 100%, 100%) ;
   padding: 1rem;
   color: hsl(224, 10%, 45%);
   border-radius: 4px;
}
.header-content-5{
   display: flex;
   gap: 1rem;
}
.text-content-5{
   margin-top: 1rem;
   h4{
      font-size: 14px;
   }
   p{
      font-size: 12px;
   }
}
.profile-5 img{
   border-radius: 50%;
}
.card-body-5{
   display: flex;
   flex-direction: column;
   gap: 1rem;
}
.card-body-5{
   h3{
      font-size: 14px;
      line-height: 1rem;
   }
   p{
      font-size: 12px;
      line-height: 1.2rem;
   }
}
  .testimonials{
   display: grid;
    grid-template-areas:
     "one"
     "two"
     "three"
     "four"
     "five"
    ;
   }
   .card-1{
      grid-area:one ;
   }
   .card-2{
      grid-area:two ;
   }
   .card-3{
      grid-area:three ;
   }
   .card-4{
      grid-area: four;
   }
   .card-5{
      grid-area:five ;
   }
/*media queries*/
@media (max-width:700px) {
  .header-content{
      background-image: none;
   }
 }
  
 
@media (min-width:800px) {
   .testimonials{
      grid-template-areas: 
      "one one"
      "two five"
      "three five"
      "four four"
      ;
   }
  
   /* .bg-logo{
      display: flex;
      margin-left: auto;
   } */
}
@media  (min-width:1200px) {
   .testimonials{
   grid-template-areas: 
   "one two five"
   "three four five"
   ;
}
}