html, body {
    margin: 0;
    padding: 0;
}

.scroll-container {
    width: 100%;
    height: auto;
}

.data-index {
    width: 100%;

    .image {
        width: 8rem;
    }



    thead, tfoot {
        th {
            text-align: left;
            height: 2rem;
        }
    }

    tbody {
        tr:nth-child(odd) {
          background-color: #eee;
        }
        tr:nth-child(even) {
          background-color: #fff;
        }
        tr {

            &:hover {
                background-color: #ccc;
                cursor: pointer;
            }
            .image {
                aspect-ratio: 4 / 3;
                overflow: hidden;
                /*max-width: 6rem;*/
                height: 6rem;
                display: grid;
                place-items: center;
                object-fit: cover;

                img {
                    aspect-ratio: 4 / 3;
                    max-width: 8rem;
                    /*height: 4rem;*/
                    object-fit: cover;
                }
            }



            .name {
                /*width: 30rem;*/
            }

            .category {
                /*width: 20rem;*/
            }
        }
    }
}