@media (max-width: 688px){
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .logo a{
        margin-left: 5px;
    }

    nav a{
        padding-right: 10px;
    }
   .header,.container{
       width: 100%;
   } 
   .section-title{
       text-align: center;
   }
   .players{
       grid-template-columns: repeat(1,1fr);
   }
   .player{
       flex-direction: column;
   }
   .blogs{
       grid-template-columns: repeat(1,1fr);;
       row-gap: 5px;
   }
   .courses{
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 10px;
   }
}