@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap");
html {
  font-size: 100%;
  box-sizing: border-box;
  height: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  line-height: 1.3;
  margin: 0;
  padding: 0;
  background-color: #cfcfcf;
  color: #000;
  width: 100%;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin: 50px 30px 30px 30px;
}
.testimonials-grid .grid1 {
  background-image: url("/images/bg-pattern-quotation.svg");
  background-repeat: no-repeat;
  background-position: right;
  background-position-y: 0px;
  color: white;
  background-color: #7541c8;
  transition: 1s ease;
}
.testimonials-grid .grid2 {
  background-color: #48556a;
  color: white;
  transition: 2s ease;
}
.testimonials-grid .grid3 {
  background-color: white;
  transition: 3s ease;
}
.testimonials-grid .grid4 {
  background-color: #19212e;
  color: white;
  transition: 4s ease;
}
.testimonials-grid .grid5 {
  background-color: white;
  transition: 5s ease;
}
.testimonials-grid .grid {
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 40px;
}
.testimonials-grid .grid .biodata {
  display: grid;
  grid-template-columns: 50px 100px;
  grid-template-rows: 50px;
}
.testimonials-grid .grid .biodata img {
  width: 40px;
  border: 2px solid white;
  margin-top: 7px;
  border-radius: 50%;
}
.testimonials-grid .grid .biodata .names {
  font-family: Barlow Semi Condensed;
}
.testimonials-grid .grid .biodata .names h6:first-child {
  margin-top: 10px;
  margin-bottom: 4px;
}
.testimonials-grid .grid .biodata .names h6:last-child {
  opacity: 50%;
  margin-top: 0px;
}
.testimonials-grid .grid .feedback-heading {
  font-family: Barlow Semi Condensed;
  font-size: 17px;
}
.testimonials-grid .grid .feedback-heading h3 {
  margin-top: 7px;
}
.testimonials-grid .grid .feedback-detail {
  font-family: Barlow Semi Condensed;
  font-size: 13px;
  opacity: 70%;
}

.attribution {
  font-size: 16px;
  text-align: center;
  font-family: Barlow Semi Condensed;
}

.attribution a {
  color: #3e52a3;
  text-decoration: none;
}

@media all and (min-width: 800px) {
  .testimonials-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 30px;
    margin-top: 100px;
  }
  .testimonials-grid .grid1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
  }
  .testimonials-grid .grid3 {
    background-color: white;
  }
  .testimonials-grid .grid4 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
  }
  .testimonials-grid .grid5 {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: -1;
    grid-row-end: 3;
  }
}