@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

@media (max-width: 900px) {
  main > * {
    margin: auto;
    text-align: center;
  }
  main {
    margin: 5em 0;
  }
  main #text_main {
    padding: 2em 0;
  }
  main #cmp_reviews {
    padding-bottom: 3em;
  }
  main #cmp_reviews .cmp_reviews_stars {
    margin: auto;
  }
  main .comments {
    margin: auto;
  }
}
@media (min-width: 900px) {
  main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "item1 item3" "item2 item3" "item4 item4";
  }
  main h1 {
    grid-area: item1;
  }
  main #text_main {
    grid-area: item2;
    margin: 2em 0 3em;
  }
  main #cmp_reviews {
    grid-area: item3;
    padding-top: 30px;
    margin-left: 50px;
  }
  main #cmp_reviews .cmp_reviews_stars:nth-child(2) {
    margin-left: 40px;
  }
  main #cmp_reviews .cmp_reviews_stars:nth-child(3) {
    margin-left: 80px;
  }
  main #cmp_reviews .cmp_reviews_stars {
    display: flex;
    align-items: center;
  }
  main #cmp_reviews .cmp_reviews_stars .stars {
    margin-right: 30px;
  }
  main #cmp_comments {
    grid-area: item4;
  }
  main #cmp_comments .comments:nth-child(2) {
    margin-top: 20px;
  }
  main #cmp_comments .comments:nth-child(3) {
    margin-top: 40px;
  }
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
body main h1 {
  color: hsl(300, 43%, 22%);
  width: 280px;
  font-size: 2.5em;
}
body main #text_main {
  color: hsl(303, 10%, 53%);
  min-width: 200px;
  max-width: 400px;
  line-height: 1.5em;
}
body main #cmp_reviews .cmp_reviews_stars {
  background: hsl(300, 24%, 96%);
  border-radius: 10px;
  margin-top: 10px;
  padding: 15px;
  width: 400px;
}
body main #cmp_reviews .cmp_reviews_stars .stars::before {
  content: "★ ★ ★ ★ ★";
  color: #EF9546;
  font-size: 20px;
}
body main #cmp_reviews .cmp_reviews_stars p {
  color: hsl(300, 43%, 22%);
  font-weight: bolder;
}
body main #cmp_comments {
  display: flex;
  flex-flow: wrap;
  gap: 20px;
}
body main #cmp_comments .comments {
  background: hsl(300, 43%, 22%);
  max-width: 350px;
  height: 180px;
  padding: 20px;
  border-radius: 10px;
}
body main #cmp_comments .comments .comments_user {
  display: flex;
  flex-flow: wrap;
  align-items: center;
}
body main #cmp_comments .comments .comments_user img {
  height: 40px;
  border-radius: 50%;
}
body main #cmp_comments .comments .comments_user div {
  margin: 0 1em 0;
}
body main #cmp_comments .comments .comments_user div .name_avatar {
  color: white;
}
body main #cmp_comments .comments .comments_user .text_comments_user {
  color: white;
  flex-basis: 100%;
  margin-top: 1em;
  opacity: 0.9;
}
body main #cmp_comments .comments .comments_user div p:nth-child(2) {
  color: hsl(333, 80%, 67%);
}

/*# sourceMappingURL=index.css.map */