body, html {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    // background: conic-gradient(#fff, #fff 90deg, #ddd 90deg, #ddd 180deg, #fff 180deg, #fff 270deg, #ddd 270deg);

    // background-size: 50px 50px;

}

​

​

ul {

    position: relative;

    margin: auto;

    width: 500px;

    height: 200px;

    border: 1px solid #000;

    background: #d8942f;

    display: flex;

    flex-wrap: nowrap;

    flex-direction: row;

    justify-content: safe center;

    align-items: center;

    gap: 10px;

    overflow: auto;

    counter-reset: myCounter;

}

​

li {

    position: relative;

    flex-shrink: 0;

    width: 120px;

    height: 180px;

    border: 1px solid #000;

    background: #ddd;

    &::before {

        counter-increment: myCounter;

        content: counter(myCounter);

        inset: 0;

        position: absolute;

        text-align: center;

        font-size: 42px;

        line-height: 180px;

    }

}

​