.container {
    display: flex;
    /* gap: 12px; */
    /* margin-top: 0.5rem; */
  }
  
  .sidebar {
    /* width: 260px; */
    /* min-width: 200px; */
    min-width: 194px;
    /* width: 100%; */
  }
  
  .categories {
    /* margin-top: 8px; */
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    /* padding: 8px; */
  }
  
  .catItem {
    padding: 8px 10px;
    font-size: 14px;
    color: #0b66c3;
    cursor: pointer;
  }
  
  .catItemActive {
    background: #0b66c3;
    color: #fff;
    border-radius: 4px;
  }
  
  .main {
    flex: 1;
  }
  
  .sectionGameWise {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0;
    margin: 0;
    justify-content: start;
    width: 100%;
  }
  
  .sectionGameWise a {
    display: block;
    text-decoration: none;
    width: calc(14.2% - 1.8px);
  }
  
  @media only screen and (max-width: 767px) {
    .sectionGameWise a {
      width: calc(33.3% - 1.5px);
      margin-bottom: 2px;
    }
  }
  
  @media (max-width: 480px) {
    .section a {
      /* width: 107px; */
    }
  }
  
  .bar-active {
    background-color: #2c3e50;
    color: #cccccc;
  }
  
  .card {
    width: 100%;
    cursor: pointer;
    position: relative;
  }
  
  @media (max-width: 900px) {
    .container {
      flex-direction: column;
    }
  
    .sidebar {
      width: 100%;
    }
  }
  
  @media (max-width: 480px) {
  
    /* On mobile, maybe we want them to share space evenly or just default to 160px wrapping. 
       Keeping it simple with the default wrapping for now, or letting them shrink? 
       Flexbox with fixed width 160px will wrap 2 per row on >328px screens (+gap).
       Below 328px it might be 1 per row. 
       This is reasonable behavior. */
    .section {
      /* gap: 6px; */
      justify-content: start;
    }
  }