styles.css

* {
   margin: 0;
  padding: 0;
  font-family:"League Spartan";
  box-sizing: border-box;
}



body {
  height:100%;
  width:79.800rem;
  margin-top:7.375rem;
  margin-left:10.313rem;
  background-image: url("https://assets.codepen.io/11868974/bg-pattern-top-desktop.svg"), url("https://assets.codepen.io/11868974/bg-pattern-bottom-desktop.svg");
  background-repeat:no-repeat;
  background-position: left -2px top 0px,
                    left 355px top 130px;
}



.h1 {
  height:9.375rem;
  width:21rem;
  border:none;
  line-height:48px;
 
}

h1 {
  font-size:52px;
  color:hsl(300, 43%, 22%);
}

.we {
  font-size:18.5px;
  color:hsl(303, 10%, 53%);
  font-weight:500;
  line-height:25px;
  position:relative;
  top:20px;
  border:none;
  width:440px;
  height:65px;
}

p {
  font-size:15px;
}


img {
  height:42px;
  width:42px;
  border-radius:45px;
}

.images-1 {
  display:inline-flex;
  flex-direction:column;
  width:21.875rem;
  height:14.688rem;
  background:hsl(300, 43%, 22%);
  color:white;
  border-radius:10px;
  position:relative;
  top:45px;
  left:-450px;
}

.images-2 {
  display:inline-flex;
  flex-direction:column;
  width:21.875rem;
  height:14.688rem;
  background:hsl(300, 43%, 22%);
  color:white;
  border-radius:10px;
  position:relative;
  left:-425px;
  top:60px;
  
}

.images-3 {
  display:inline-flex;
  flex-direction:column;
  width:21.875rem;
  height:14.688rem;
  background:hsl(300, 43%, 22%);
  color:white;
  border-radius:10px;
  position:relative;
  left:760px;
  top:-156px;
}

 .portrait{
  position:relative;
  left:30px;
  top:40px;
}

.top {
  display:flex;
  flex-direction:column;
  position:relative;
  left:100px;
  top:3px;
  border:none;
}

.name {
  font-size:15px;
}

.pink {
  position:relative;
  top:5px;
  color:hsl(323, 54%, 66%);
  font-size:16px;
  
}

  .star-1 {
    align-items:center;
    display:inline-flex;
    width:27.813rem;
    height:3.438rem;
    background:rgb(247,242,248);
    color:hsl(300, 43%, 22%);
    font-weight:700;
    position:relative;
    left:35.625rem;
    top:-11.700rem;
    border:none;
    
  }

.star-2 {
    align-items:center;
    display:inline-flex;
    width:27.813rem;
    height:3.438rem;
  background:rgb(247,242,248);
    color:hsl(300, 43%, 22%);
    font-weight:700;
    position:relative;
    left:165px;
    top:-117px;
    border:none;
   
  }

.star-3 {
    align-items:center;
    display:inline-flex;
    width:27.813rem;
    height:3.438rem;
  background:rgb(247,242,248);
    color:hsl(300, 43%, 22%);
    font-weight:700;
    position:relative;
    left:660px;
    top:-105px;
    border:none;
    
  }

.stars {
  width:1.098rem;
  height:1.098rem;
  position:relative;
  left:35px;
  margin:5px;
}


.stars-2 {
  width:1.098rem;
  height:1.098rem;
  position:relative;
  left:35px;
  margin:5px;
}

.rated-1 {
  position:relative;
  left:50px;
  font-size:17px;
}

.rated-2 {
  position:relative;
  left:50px;
  font-size:17px;
}

.rated-3 {
  position:relative;
  left:50px;
  font-size:17px;
}


div {
  border-radius:10px;
}



.text {
  display:flex;
  width:17.8rem;
  align-items:center;
  justify-content:center;
  line-height:22px;
  position:relative;
  top:22px;
  left:30px;
  font-size:16.4px;
}


.text-2 {
  display:flex;
  width:17rem;
  align-items:center;
  justify-content:center;
  line-height:22px;
  position:relative;
  top:23px;
  left:30px;
  font-size:16.4px;
}



@media (max-width:475px) {
  
  body {
    overflow-x:hidden;
    padding:0;
    width:100%;
    height:1525px;
    margin:20px;
    background-image: url("https://assets.codepen.io/11868974/bg-pattern-top-mobile.svg"),          url("https://assets.codepen.io/11868974/bg-pattern-bottom-mobile.svg");
    background-repeat:no-repeat;
    background-size:120%;
    background-position: left 0px top -50px,
                         left 0px top 870px;
  }
 
 
  .container {
   width:100%;
  }
  
  .h1 {
    position:relative;
    top:80px;
    left:70px;
    width:270px;
    text-align:center;
    line-height:32px;
    letter-spacing:-1px;
    
   
  }
  
  h1 {
    font-size:39px;
  }
  
  .we {
    display:grid;
    position:relative;
    top:50px;
    width:350px;
    height:95px;
    text-align:center;
    line-height:25px;
    left:35px;
    
  }
  
  .star-1 {
    display:inline-flex;
    position:relative;
    left:30px;
    top:95px;
    height:75px;
    width:350px;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  
  .star-2 {
    display:inline-flex;
    left:30px;
    top:113px;
    height:75px;
    width:350px;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  
  .star-3 {
    display:inline-flex;
    left:30px;
    top:135px;
    height:75px;
    width:350px;
    align-items:center;
   justify-content:center;
    text-align:center;
    
      
  }
  
  .images-1 {
    position:relative;
    left:30px;
    top:185px;
    height:245px;
  }
  
  .images-2 {
    display:inline-flex;
    position:relative;
    top:205px;
    left:30px;
    width:350px;
    height:245px;
  }
  
  .images-3 {
    display:inline-flex;
    position:relative;
    top:220px;
    left:30px;
    height:245px;
  }
  
  
  .stars {
    position:relative;
    top:-14px;
    left:100px;
  }
  
  
  
  .rated-1 {
    position:relative;
    left:-60px;
    top:17px;
  }
  
  .rated-2 {
    display:inline-block;
    position:relative;
    left:-65px;
    top:18px;
    text-align:center;
    align-items:center;
    min-width:250px;
    letter-spacing:0.5px;
  }
   
    .stars-2 {
    position:relative;
    top:-9px;
    left:130px;
  }
  
  .rated-3 {
    position:relative;
    left:-70px;
    top:15px;
    text-align:center;
    align-items:center;
    justify-content:center;
  }
  
  .text {
    height:120px;
    width:75%;
    top:15px;
  }
  
  .text-2 {
    width:75%;
  }
  
  .name {
    font-size:15.5px;
    
  }
}