body, html {

    width: 100%;

    height: 100%;

    display: flex;

    caret-color: transparent;

}

​

.g-container {

    position: relative;

    width: 500px;

    height: 500px;

    margin: auto;

    border: 2px solid #333;

}

​

.g-box {

    position: relative;

    height: 500px;

    display: flex;

    flex-wrap: wrap;

    flex-direction: column;

    z-index: 1;

}

​

.g-wrap {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    z-index: 10;

    &:active {

        display: none;

        // z-index: 0;

    }

}

​

.g-btn {

    position: absolute;

    top: -36px;

    border: 1px solid #666;

    padding: 5px;

    cursor: pointer;

    background: #fff;

    &:active {

        user-select: none;

        filter: contrast(.8);

    }

}

​

.g-btn:active ~ .g-box .g-item {

    transition: 0s;

    display: none;

}

​

.g-row {

    width: 500px;

    flex-grow: 1;

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    justify-content: space-between;

}

​

.g-item {

    flex-grow: 1;

    transition: 999999s;

}

​

.g-item:hover {

    background: #000;

    transition: 0s;

}

​

​