.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); } } } }