web2468/src/components/GameList/styles.module.scss

@import "../../styles/vars";
.list_container {
  //margin-top: 2.75rem;
  & .game_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.25rem .75rem;
    @media screen and (max-width: $width-mobile-max){
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
  }
  & .game_list_mobile{
    display: flex;
    flex-direction: column;
    //gap: .75rem;
    transition: all var(--transition);
    //will-change: transform;
    & .list_row{
      display: grid;
      gap: .75rem;
      grid-template-columns: repeat(3,1fr);
      transition: all var(--transition);
      //will-change: transform;
      margin-bottom: .75rem;
    }
  }
  & .page_con{
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: all var(--transition);
  }
  & .page_progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.0625rem;
    margin-top: 3rem;
    & .progress {
      width: 5rem;
      height: .375rem;
      border-radius: var(--border-radius);
      background-color: #31343c;
      position: relative;
      margin: 0 .3125rem;
      & .green{
        position: absolute;
        left: 0;
        height: 100%;
        border-radius: var(--border-radius);
        top: 0;
        max-width: 100%;
        background-color: var(--primary-color);
      }
    }
  }
  & .show_more{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    & .more_btn{
      background: var(--nav-item-hover);
      border-radius: var(--border-radius);
      height: 44px;
      line-height: 44px;
      min-width: 148px;
      width: auto;
      margin: 0 auto;
      font-weight: 600;
      color: var(--header);
      &:disabled{
        opacity: .5;
        cursor: default;
      }
    }
  }
}