:root {
    --bg-col: rgba(0, 139, 139, 0.1); /*darkcyan*/
    --bg-col-hover: rgba(0, 139, 139, 0.2);
    --darksteel-col: darkslategrey;
    --font-col: darkcyan;
    --test-col-1: crimson;
    --rowHeight: 60px;
    --gap: 10px;
    --x: 25vw;
    --y: 25vh;
    --w: 50vw;
    --h: 50vh;
}

body {
    background-color: var(--darksteel-col);
}

.buffer {
    box-sizing: border-box;
    background-color: var(--bg-col);
    position: absolute;
    top: calc(var(--y) + var(--h));
    margin: 10px 0 10px 0;
    height: 100px;
    width: var(--w);
    left: var(--x);
    padding: 10px;
    overflow: scroll;
}
.buffer::-webkit-scrollbar {
    display: none;
}

.grid {
    position: relative;
    background-color: var(--test-col-1);
    display: grid;
    grid-template-columns: auto;
    grid-auto-rows: calc(var(--rowHeight) - var(--gap));
    grid-gap: var(--gap);
    padding-bottom: var(--gap);
}

.outer_wrap {
    position: absolute;
    top: var(--y);
    left: var(--x);
    min-height: calc(3 * var(--rowHeight));
    height: var(--h);
    width: var(--w);
    overflow: hidden;
}
.outer_wrap:before, .outer_wrap:after{ /* shadows */
    content: '';
    position: absolute;
    box-sizing: border-box;
    box-shadow: 0 0 calc((var(--rowHeight) - var(--gap)) * 0.8) calc(var(--rowHeight) - var(--gap)) var(--darksteel-col);
    width: 100%;
    height: 0;
    z-index: 100;
}

.inner_wrap {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: scroll;
    display: grid;
    grid-template-columns: auto;
    grid-auto-rows: min-content;
}
.inner_wrap::-webkit-scrollbar {
    display: none;
}
.inner_wrap::before {
    content: '';
    position: relative;
    box-sizing: border-box;
    height: var(--rowHeight);
}
.inner_wrap:after {
    content: '';
    position: relative;
    box-sizing: border-box;
    height: calc(var(--h) - 2 * var(--rowHeight));
    min-height: var(--rowHeight);
}

.item {
    margin-top: 10px; /*----------------------------*/
    box-sizing: border-box;
    height: var(--rowHeight);
    background-color: var(--bg-col);
    padding: 10px;
    color: var(--font-col);
    font-weight: bold;
    letter-spacing: 3px;
}

.item:hover {
    background-color: var(--bg-col-hover);
}

.test_grid {
    position: relative;
    box-sizing: border-box;
    height: calc(4 * 60px);
    background-color: var(--test-col-1);
    opacity: 0.8;
    margin: 10px 0 10px 0;
}