html {
  box-sizing: border-box;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hidden {
  display: none !important;
}

body {
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: hsl(0deg, 0%, 100%);
  background: url("/bg-pattern-top-mobile.abd38adc.svg") top left no-repeat, url("/bg-pattern-bottom-mobile.109f47a5.svg") bottom right no-repeat;
  align-items: center;
  min-height: 100vh;
  font-family: "League Spartan", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  font-size: 15px;
  padding: 2rem;
}
@media only screen and (min-width: 23.4375rem) {
  body {
    background-image: url("/bg-pattern-top-desktop.82624150.svg") top left no-repeat, url("/bg-pattern-bottom-desktop.53adee56.svg") bottom right no-repeat;
  }
}

h1 {
  color: hsl(300deg, 43%, 22%);
  text-align: center;
  font-size: 37.5px;
  line-height: 1;
  font-weight: 700;
  margin-bottom: 0;
}
@media only screen and (min-width: 23.4375rem) {
  h1 {
    text-align: left;
  }
}

.is-responsive {
  display: flex;
  flex-shrink: 1;
  margin: 0;
  padding: 0;
}

.container {
  max-width: toRem(375);
  width: 100%;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
}
@media only screen and (min-width: 23.4375rem) {
  .container {
    max-width: toRem(1000);
    width: 100%;
  }
}

.ratings-container {
  max-width: toRem(375);
  width: 100%;
  flex-direction: column;
}
@media only screen and (min-width: 23.4375rem) {
  .ratings-container {
    max-width: toRem(1440);
    flex-direction: row;
  }
}

.reviews-container {
  margin-top: toRem(45);
}

.introduction {
  flex-direction: column;
}
@media only screen and (min-width: 23.4375rem) {
  .introduction {
    max-width: 34.375rem;
    margin-right: 5.625rem;
  }
}

.perex {
  color: hsl(303deg, 10%, 53%);
  text-align: center;
  margin-bottom: 14px;
}
@media only screen and (min-width: 23.4375rem) {
  .perex {
    text-align: left;
    margin-right: 5.625rem;
  }
}

.rating-wrapper {
  flex-direction: column;
  align-items: center;
  max-width: 23.4375rem;
  width: 100%;
  background-color: hsl(300deg, 24%, 96%);
  margin: 0.625rem 0;
  border-radius: 0.625rem;
}
@media only screen and (min-width: 23.4375rem) {
  .rating-wrapper {
    flex-direction: row;
    max-width: 90rem;
    padding: 0.625rem 0;
    justify-content: space-evenly;
  }
  .rating-wrapper:nth-child(1) {
    margin-right: 5rem;
  }
  .rating-wrapper:nth-child(2) {
    margin-right: 2.5rem;
  }
}

.ratings {
  flex-direction: column;
  align-items: center;
  max-width: 23.4375rem;
  width: 100%;
  font-size: 11.25px;
}
@media only screen and (min-width: 23.4375rem) {
  .ratings {
    max-width: 90rem;
    justify-content: space-around;
  }
}

.ratingStars {
  margin: 0;
}

.star-icon {
  text-align: center;
  display: inline-block;
  margin: 0.9375rem 0 0 0;
  width: 17px;
  height: 16px;
}
@media only screen and (min-width: 23.4375rem) {
  .star-icon {
    margin: 0;
  }
}

p {
  color: hsl(300deg, 43%, 22%);
  font-weight: 700;
  font-size: 16.5px;
  margin-top: 0;
}
@media only screen and (min-width: 23.4375rem) {
  p {
    margin: 0;
  }
}

.reviews {
  flex-direction: column;
}
@media only screen and (min-width: 23.4375rem) {
  .reviews {
    max-width: 90rem;
    flex-direction: row;
    align-items: flex-start;
  }
}

.customers {
  margin: 0.625rem 0 0.625rem 0;
  border-radius: 0.625rem;
  flex-direction: column;
  background-color: hsl(300deg, 43%, 22%);
}
@media only screen and (min-width: 23.4375rem) {
  .customers {
    margin: 0.9375rem 0.9375rem 0.9375rem 0;
  }
  .customers:nth-child(2) {
    margin: 1.875rem 0 0 0;
  }
  .customers:nth-child(3) {
    margin: 2.8125rem 0 0 0.625rem;
  }
}

.customers-header {
  flex-direction: row;
  align-items: center;
}

div {
  margin: 0.9375rem 0 0 0;
}

img {
  display: block;
  border-radius: 50%;
  margin: 1.875rem 0.9375rem 0 1.875rem;
  width: 2.8125rem;
  height: 2.8125rem;
}

h2 {
  color: hsl(0deg, 0%, 100%);
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 0;
}

.verified-buyer {
  color: hsl(333deg, 80%, 67%);
  margin: 0;
}

.feedback {
  color: hsl(0deg, 0%, 100%);
  padding: 0 1.875rem 0 1.875rem;
}

/*# sourceMappingURL=/main.9f098f96.css.map */