html, body {
  height: 100%;
}

body {
  background-image: url("../../images/bg-pattern-top-mobile.svg"), url("../../images/bg-pattern-bottom-mobile.svg");
  background-repeat: no-repeat;
  background-size: 100% 40%, 100% 40%;
  background-position: top, bottom;
  background-attachment: fixed;
}

@font-face {
  font-family: spartan;
  src: url("../font/Spartan-VariableFont_wght.ttf");
}
* {
  font-family: spartan;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

.section__intro--header {
  color: #502050;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
}
.section__intro--subheader {
  color: #937b92;
  text-align: center;
  margin-bottom: 45px;
}
.section__rating--star {
  margin: 0 3px;
}
.section__rating--text {
  margin-top: 10px;
  font-weight: 700;
}
.section__reviews .col:nth-child(1) {
  position: relative;
  bottom: 15px;
}
.section__reviews .col:nth-child(3) {
  position: relative;
  top: 15px;
}

.container {
  padding: 8em 0;
}

.box {
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 16px 0;
  border-radius: 8px;
  text-align: center;
}
.box--pink {
  color: #502050;
  background-color: #f7f2f7;
  font-weight: 700;
}
.box--magenta {
  color: #937b92;
  background-color: #502050;
  margin: 0;
  min-height: 300px;
}
.box__header {
  display: flex;
  align-items: center;
  padding: 28px 30px;
}
.box__body {
  padding: 0 28px 30px;
}

.media--image {
  border-radius: 50%;
  height: auto;
  width: 45px;
}
.media__content {
  text-align: left;
  margin: 0 22px;
  color: white;
}
.media__content--title {
  font-weight: 700;
}
.media__content--subtitle {
  color: #ee68a4;
}
.media__content--text {
  color: white;
  text-align: left;
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: #3e52a3;
}

@media screen and (min-width: 992px) {
  body {
    background-image: url("../../images/bg-pattern-top-desktop.svg"), url("../../images/bg-pattern-bottom-desktop.svg");
    background-size: auto;
  }

  .box--pink {
    padding: 12px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .section__intro--header {
    text-align: left;
  }
  .section__intro--subheader {
    text-align: left;
  }
  .section__rating--images {
    flex: 1;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 0;
  }
  .section__rating--text {
    margin-top: 0;
    flex: 2;
    text-align: left;
  }
}