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

.list_container{
  //margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 0.25rem;
  & .grid_top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    //margin-bottom: 0.625rem;
    & .grid_tit{
      //font-size: 1.25rem;
      font-size: 0.92rem;
      font-weight: 700;
      align-items: center;
      //height: 2rem;
      //line-height: 2rem;
      display: flex;
      color: var(--text);
      gap: 0.25rem;
      svg{
        width: 0.95rem;
        height: 0.95rem;
        fill: var(--text);
      }
    }
    & .grid_nav{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1px;
      a{
        display: block;
        color: var(--primary-color);
        padding: 0 .625rem;
        //height: 2.25rem;
        //line-height: 2.25rem;
        font-size: 0.92rem;
        font-weight: 600;
      }
      & .slide_btn{
        width: 2.25rem;
        height: 2.25rem;
        background-color: var(--standard);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: var(--border-radius);
        &:disabled{
          opacity: .5;
          cursor: default;
        }
        &:enabled{
          &:hover{
            background-color: var(--nav-item-hover) !important;
          }
        }
        & .btn_arrow{
          width: 12px;
          fill: var(--text);
        }
        & .btn_left{
          transform: rotate(180deg);
        }
      }
    }
  }
  & .grid_list{
    --grid-gap: .75rem;
    row-gap: 1.25rem;
    display: grid;
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-auto-flow: column;
    //grid-auto-columns: calc(100% / var(--grid-num) - (var(--grid-num) - 1)* var(--grid-gap) / var(--grid-num));
    grid-template-columns: repeat(var(--grid-num),1fr);
    gap: var(--grid-gap);
    position: relative;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: .75rem;
    margin-top: -0.75rem;
  }
  & .grid_list_m{
    //--grid-gap: .75rem;
    //row-gap: 1.25rem;
    //display: grid;
    //grid-template-rows: repeat(2, 1fr);
    //grid-auto-flow: column;
    ////grid-auto-columns: calc(100% / var(--grid-num) - (var(--grid-num) - 1)* var(--grid-gap) / var(--grid-num));
    ////grid-auto-columns: calc(100% / 3 - (2)* var(--grid-gap) / 3);
    //grid-template-columns:repeat(3, 1fr);
    //&_onerow{
    //  grid-template-rows: repeat(1, 1fr);
    //}
    //gap: var(--grid-gap);
    //position: relative;
    //scroll-snap-type: x mandatory;
    //scroll-behavior: smooth;
    //overflow-x: auto;
    //overflow-y: hidden;
    //transition: all var(--transition);
    ////z-index: 2;
    //padding-top: .75rem;
    //display: flex;
    //flex-direction: row;
    width: 100%;
    height:auto;
    position: relative;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overflow-x: auto;
    overflow-y: hidden;
    gap: .75rem;
    & .grid_row_con{
      display: flex;
      flex-direction: column;
      gap: .75rem;
      transition: all var(--transition);
      padding-top: .75rem;
      margin-top: -0.75rem;
      & .grid_row{
        display: grid;
        gap:.75rem;
        grid-auto-flow: column;
        grid-template-rows: repeat(1, 1fr);
        grid-template-columns:repeat(3, 1fr);
      }
    }
  }
}