#photosList {
    align-content: flex-end;
    align-items: end;
    /* min-height: 2rem; */
    column-gap: 0px;
}

#photosList .date {
    /* background-color: yellow; */
    /* min-height: 20px; */
    /* line-height: 0.9em; */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform-origin: 50% 50%;
    transform: rotate(180deg);

}

#photosList .date:first-child {
    padding-left: var(--m);
}

#photosList .date:last-child {
    padding-right: var(--m);
}

#photosList .item {
    background-color: var(--main);
    background: linear-gradient(90deg, var(--main) 0%, var(--mainGrad) 100%);
    height: 1rem;
    flex-grow: 1;
    cursor: pointer;
    transition: height var(--animation);
}

#photosList .visited {
    background-color: var(--third);
    background: linear-gradient(90deg, var(--third) 0%, var(--thirdGrad) 100%);
}

#photosList .current {
    /* background-color: var(--contrast); */
    height: 2rem;
}

#photosList .hovered,
#photosList .item:hover {
    background-color: var(--contrast);
    background: linear-gradient(90deg, var(--contrast) 0%, var(--contrast) 100%);
    /* background-color: blue; */
}

@media screen and (orientation: portrait) {}