@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&family=Poppins:wght@500&display=swap');

  body{
    font-family: 'Noto Serif', serif;
    font-family: 'Poppins',sans-serif;
    background: #F3F1FF ;
  }
  main{
    display: flex;
    flex-direction: column;
    align-items: center;
  } 
  .container{
    background-color:#FFFFFF;
    width:870px;
    padding:30px;
    border-radius: 5px;
    margin-top: 21px;
  }
  hr{
    border: 1px solid #D1D1D1;
  }
  .top-players{
    margin-bottom: 30px;
  }
  .section-title{
    color: #562EFF;
    font-size: 24px;
    margin-top: 3px;
  }
.players{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-row-gap:30px;
 
}
.player{
  display:flex;
  align-items: center;
} 
.player img{
  width:56px;
  height:56px;
}
.player-name{
  margin-left: 16px;
  font-size: 18px;
}
.blogs{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap:26px;
}
.blog{
  display: flex;
}
.blog img{
  width: 177px;
  height: 117px;
}
.blog-info{
  margin-left: 16px;
}
.blog-title{
  font-size: 20px;
}
.blog-author{
  color:#9F9F9F;
  font-size: 16px;
}
.blog-author a{
  text-decoration: none;
  font-size: 16px;
  color: #562EFF;
}
.courses{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 24px;
}
.course .course-banner img{
  width: 224px;
  height: 104px;
}
.course-info{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fa-star{
  font-size: 12px ;
}
.fa-star.filled{
  color: #FFC014;
}
.fa-star.empty{
  color: #AEAEAE;
}
@media only screen and (max-width:688px) {
  .container{
    width: 100%;
  }
  .players, .blogs, .courses{
    background-color: red;
    grid-template-columns: repeat(1, 1fr);
  }
  .player, .blog{
    flex-direction: column;
  }
 }
 @media only screen and (min-width:688px) and (max-width:992px) {
  .container{
    width: 100%;
  }
  .players, .courses{
    grid-template-columns: repeat(1, 1fr);
  }
  .blogs{
    grid-template-columns: repeat(1, 1fr);
  }
 }