.page__ratings, .page__posts {
  display: flex;
  gap: clamp(1em, 0.85em + 1.5vw, 2em);
  justify-content: center;
  flex-wrap: wrap;
}

.page__intro, .page__ratings, .page__posts {
  margin-block-start: clamp(2.56em, 1em + 3.267vw, 3.333em);
}

.rating-bar, article {
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
  border-end-start-radius: 10px;
  border-end-end-radius: 10px;
}

.page__intro, h2 {
  text-align: center;
}

.page__intro-text, h1, h2 {
  color: hsl(300, 43%, 22%);
}

h3, p {
  color: hsl(300, 24%, 96%);
}

h3 {
  font-weight: 500;
}

h1, h2 {
  font-weight: 700;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  inline-size: calc(95% - 1em);
  padding-block: clamp(2.5em, 1em + 3vw, 3.5em);
}
@media (min-width: 74rem) {
  main {
    padding-block-start: 0;
  }
}

article {
  padding-inline: clamp(1.75em, 1em + 2vw, 2em);
  padding-block: clamp(1.75em, 1em + 2vw, 2em);
  background-color: hsl(300, 43%, 22%);
}

img {
  border-start-start-radius: 50px;
  border-start-end-radius: 50px;
  border-end-start-radius: 50px;
  border-end-end-radius: 50px;
  inline-size: clamp(2.5em, 5vw, 3em);
  block-size: clamp(2.5em, 5vw, 3em);
}

blockquote {
  margin-inline: 0;
}

@font-face {
  font-family: "League Spartan";
  src: url("../fonts/League_Spartan/LeagueSpartan-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "League Spartan";
  src: url("../fonts/League_Spartan/LeagueSpartan-Medium.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "League Spartan";
  src: url("../fonts/League_Spartan/LeagueSpartan-Bold.ttf") format("truetype");
  font-weight: 700;
}
html {
  font-family: "League Spartan", sans-serif;
  font-weight: 400;
  font-size: 15px;
}

h1 {
  font-size: clamp(2.533em, 1.2em + 2.3vw, 3em);
  line-height: 0.9;
}

h2 {
  font-size: 1.1em;
}

p {
  line-height: 1.5;
}

@media (min-width: 74rem) {
  .page {
    display: grid;
    grid-template-areas: "intro intro . ratings ratings" "intro intro . ratings ratings" "posts posts posts posts posts" "posts posts posts posts posts" "posts posts posts posts posts";
  }
}
@media (min-width: 74rem) {
  .page__intro {
    grid-area: intro;
    text-align: start;
    inline-size: 30em;
  }
}
.page__intro-text {
  font-size: clamp(1em, 0.8em + 0.6vw, 1.26em);
}
@media (min-width: 74rem) {
  .page__ratings {
    grid-area: ratings;
    display: grid;
    grid-template-areas: "reviews reviews reviews . ." ". guru guru guru ." ". . besttech besttech besttech";
    grid-template-rows: repeat(auto-fit, 3em);
    align-content: center;
  }
}
@media (min-width: 74rem) {
  .page__posts {
    grid-area: posts;
  }
}

.rating-bar {
  background-color: hsl(300, 24%, 96%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-block-start: clamp(0.8em, 0.6em + 0.7vw, 1.267em);
  inline-size: clamp(24em, 24em + 10vw, 25em);
}
@media (min-width: 74rem) {
  .rating-bar {
    flex-direction: row;
    padding-block-start: inherit;
    block-size: 4em;
  }
  .rating-bar:nth-child(1) {
    grid-area: reviews;
  }
  .rating-bar:nth-child(2) {
    grid-area: guru;
  }
  .rating-bar:nth-child(3) {
    grid-area: besttech;
  }
}
.rating-bar__star {
  inline-size: 10em;
  block-size: clamp(1.333em, 1em + 0.875vw, 1.4em);
  background: url("../images/icon-star.svg") center right 0px/contain no-repeat, url("../images/icon-star.svg") center right 24%/contain no-repeat, url("../images/icon-star.svg") center right 48%/contain no-repeat, url("../images/icon-star.svg") center right 72%/contain no-repeat, url("../images/icon-star.svg") center right 96%/contain no-repeat;
}
.rating-bar__text {
  margin-inline-start: clamp(0.7em, 0.75em + 1vw, 0.8em);
}
@media (min-width: 74rem) {
  .rating-bar__text {
    margin-block: 0;
  }
}

.testimonial {
  max-inline-size: 17.4em;
}
@media (min-width: 74rem) {
  .testimonial:nth-child(2) {
    margin-block-start: 1em;
  }
  .testimonial:nth-child(3) {
    margin-block-start: 2em;
  }
}
.testimonial__header {
  display: flex;
  align-items: center;
}
.testimonial__header-info {
  margin-inline-start: clamp(1.333em, 1em + 1vw, 1.8em);
}
.testimonial__author {
  margin-block-end: 0;
}
.testimonial__status {
  margin-block-start: 0;
  color: hsl(333, 80%, 67%);
}
.testimonial__quote ::before {
  content: open-quote;
}
.testimonial__quote ::after {
  content: close-quote;
}

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