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

h1,
h2,
h3 {
  font-size: 100%; }

html {
  box-sizing: border-box;
  font-size: 81.25%; }
  @media only screen and (max-width: 78em) {
    html {
      font-size: 62.5%; } }

body {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 500;
  background-color: #ecf2f8; }

.container {
  padding: 1.5rem;
  max-width: 90em;
  margin: 10em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "item1 item1 item2 item3" "item4 item5 item5 item3";
  grid-gap: 2.5rem; }

.attribution {
  font-family: inherit;
  font-size: 1rem;
  text-align: center; }

.attribution a {
  color: #7541c8; }

@media only screen and (max-width: 78em) {
  .container {
    padding: 1.5rem;
    max-width: 95vw;
    margin: 5em auto 0; } }

@media only screen and (max-width: 50em) {
  html {
    font-size: 81.25%; }
  .container {
    padding: 1rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "item1 item1 item1 item1" "item2 item2 item2 item2" "item4 item4 item4 item4" "item5 item5 item5 item5" "item3 item3 item3 item3";
    grid-gap: 1rem; } }

.testimonial {
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 10px 11px 38px -6px rgba(207, 207, 207, 0.53);
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem; }
  .testimonial__photo-box {
    box-sizing: content-box;
    border-radius: 100%;
    overflow: hidden;
    width: 3rem;
    height: 3rem; }
  .testimonial__photo {
    width: 3rem; }
  .testimonial__name {
    font-weight: 600;
    font-size: 1.3rem; }
  .testimonial__verify {
    font-size: 1.1rem; }
  .testimonial__highlight {
    font-size: 1.6rem; }
  .testimonial__quote {
    line-height: 1.5; }

.item1 {
  background-color: #7541c8;
  background-image: url("../img/bg-pattern-quotation.svg");
  background-position: 80% 0;
  background-repeat: no-repeat;
  grid-area: item1;
  color: rgba(255, 255, 255, 0.5); }
  .item1 .testimonial__photo-box {
    border: 3px solid rgba(255, 255, 255, 0.5); }
  .item1 .testimonial__name {
    color: white; }
  .item1 .testimonial__highlight {
    color: white; }

.item2 {
  background-color: #48556a;
  grid-area: item2;
  color: rgba(255, 255, 255, 0.5); }
  .item2 .testimonial__photo-box {
    border: 3px solid rgba(255, 255, 255, 0.5); }
  .item2 .testimonial__name {
    color: white; }
  .item2 .testimonial__highlight {
    color: white; }

.item3 {
  background-color: white;
  grid-area: item3;
  color: rgba(72, 85, 106, 0.5); }
  .item3 .testimonial__photo-box {
    border: 3px solid rgba(72, 85, 106, 0.5); }
  .item3 .testimonial__name {
    color: #48556a; }
  .item3 .testimonial__highlight {
    color: #48556a; }

.item4 {
  background-color: white;
  grid-area: item4;
  color: rgba(72, 85, 106, 0.5); }
  .item4 .testimonial__photo-box {
    border: 3px solid rgba(72, 85, 106, 0.5); }
  .item4 .testimonial__name {
    color: #48556a; }
  .item4 .testimonial__highlight {
    color: #48556a; }

.item5 {
  background-color: #19212e;
  grid-area: item5;
  color: rgba(255, 255, 255, 0.5); }
  .item5 .testimonial__photo-box {
    border: 3px solid rgba(255, 255, 255, 0.5); }
  .item5 .testimonial__name {
    color: white; }
  .item5 .testimonial__highlight {
    color: white; }