#filter {
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 0 0 1em;
    position: relative;
}

#filter-img {
    height: 45%;

    &:hover {
        cursor: pointer;
    }

}

#filter-list {
    visibility: hidden;

    position: absolute;
    z-index: 2;

    top: 20vh;
    left: -5em;
    width: 14em;
    max-height: 70vh;
    overflow: auto;

    padding-left: 0;
    list-style: none;


    li {
        background-color: var(--black-color);
        color: var(--white-color);
        border-bottom: 2px solid black;
        padding: 0.3em;
        font-weight: bold;
        font-size: 1em;
    }

    li.active {
        background-color: var(--green-color);
        color: var(--white-color);
    }

    li:hover {
        background-color: var(--yellow-color);
        color: var(--black-color);
        cursor: pointer;
        font-weight: bold;
    }

}

@media (min-width: 2500px) {
    #filter-list {
        right: 5vw;
        width: 33em;

        li {
            font-size: 2em;
        }
    }


}


@media (min-width: 3000px) {
    #filter-list {

        right: 8vw;
        width: 41em;

        li {
            font-size: 3em;
        }
    }

}