.list {
    display: flex;

    flex-shrink: 1;

    width: 100%; height: 100%;
    padding: 1vh 1vw;

    justify-content: space-evenly;
    align-items: center;
    scroll-snap-type: x mandatory;
}

.list.horizontal {overflow-x: scroll; flex-direction: row;}
.list.vertical {overflow-y: scroll; flex-direction: column;}

.list > * {
    display: flex;

    scroll-snap-align: center;
    flex-shrink: 0;

    margin: 1vh 1vw;
    
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.list > *.hover:hover {transform: scale(1.01); filter: brightness(1.5);}
.list > *.background {background-color: var(--bg3);}
.list > *.border {
    border: var(--b1) solid 1px;
    border-radius: 5rem;
}

.list.horizontal > * {width: auto; height: 100%;}
.list.vertical > * {width: 100%; height: auto;}

.popup.button {cursor: pointer;}

.popup.item {
    display: none;
    padding: 0 20%;
}

.popup.item > * {
    margin-bottom: 1vw;
}