:root {
    --gall-thumb-size: 300px;
    --box-border-color-1: #333; /* Primary Light */
    --box-border-color-2: #333; /* Secondary Grey */
}

.folders {
    background-color: var(--box-background-color);
    /* border-radius: 3px; */
    padding: 6px;
}

.folder-layer, .folder-layer-open {
    margin-left: 20px;
    position: relative;
}

.folder-layer::before, .file-name::before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: -12px;
    border-bottom: 1px solid var(--box-border-color-2);
    border-left: 1px solid var(--box-border-color-2);
    border-radius: 0px -42px;
}


.gallery {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: stretch;
}

.gallery img {
    height: var(--gall-thumb-size);
    width: var(--gall-thumb-size);
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--box-border-color-1);
    opacity: 80%;
    transition: opacity 0.5s ease-out;
}

.gallery img:hover {
    cursor: help;
    border: 1px solid var(--box-border-color-2);
    opacity: 100%;
    transition: opacity 0.5s ease-out;
    position: relative;
    top: 1px;
    left: 1px;
}

.gallery a {
    position: relative;
}

.solo-image-wide {
    border-radius: 3px;
    width: 90%;
    min-width: 300px;
    max-width: 500px;
    margin: 5px;
    filter: saturate(80%) contrast(90%);
}

@media only screen and (max-width: 700px) {

    :root {
        --gall-thumb-size: calc((100vw / 3) - 20px);
    }

}