.staff__list[data-columns="1"],
.staff__list[data-columns="2"],
.staff__list[data-columns="3"],
.staff__list[data-columns="4"],
.staff__list[data-columns="5"],
.staff__list[data-columns="6"] {
    display: grid;
    grid-gap: var(--g-gap);
    align-items: start;
}

.staff {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: var(--g-gap);
}

.staff__filter {
    margin-bottom: 2rem;
}

.staff__group {
    margin-bottom: var(--p);
}

/* Filter */
.filter__options {
    display: flex;
    grid-gap: var(--g-gap);
    gap: var(--g-gap);
    align-items: center;
}

.filter__option {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.filter__headline {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding-right: 2rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid transparent;
}

.filter__option.-active .filter__headline {
    border-bottom: 2px solid rgb(var(--c-neutral-dark));
}

@media (hover: hover) {
    .filter__headline:hover {
        border-bottom: 2px solid rgb(var(--c-neutral-dark));
    }
}

input.filter__submit {
    margin-bottom: 0.5rem;
    background-color: transparent;
    padding: 0;
    color: rgb(var(--c-primary));
    line-height: inherit;
    font-weight: var(--f-weight-b);
}

@media (hover: hover) {
    input.filter__submit:hover {
        background-color: transparent;
        color: rgb(var(--c-primary));
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-thickness: 2px;
    }
}

.filter__headline::after {
    position: absolute;
    content: "";
    border-left: 2px solid black;
    border-top: 2px solid black;
    padding: 5px;
    right: 10px;
    top: 20%;
    transform: rotate(-135deg);
}

.filter__option.-active .filter__headline::after {
    transform: rotate(45deg);
    top: inherit;
    bottom: 20%;
}

ul.filter__items {
    display: none;
    padding: 0;
    margin: 0;
    position: absolute;
    background: rgb(var(--c-neutral-lightest));
    border: 1px solid rgb(var(--c-neutral-light));
}

ul.filter__items li {
    list-style: none;
    margin: 0;
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

@media (hover: hover) {
    ul.filter__items li:hover {
        background: rgb(var(--c-neutral-dark));
        color: rgb(var(--c-neutral-lightest));
    }
}

.filter__reset button {
    background-color: transparent;
    padding: 0;
    color: rgb(var(--c-neutral-dark));
    line-height: inherit;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid transparent;
}

@media (hover: hover) {
    .filter__reset button:hover {
        border-bottom: 2px solid rgb(var(--c-neutral-dark));
    }
}


.search__option input {
    width: 200px;
}

.search__option ul.filter__items {
    border: none;
}

.search__option ul.filter__items li {
    padding: 0;
}

@media (hover: hover) {
    .search__option ul.filter__items li:hover {
        background: transparent;
        color: inherit;
    }
}

.filter__selected {
    display: flex;
    gap: var(--g-gap);
    grid-gap: var(--g-gap);
}

.selected__object button {
    background: rgb(var(--c-neutral-dark));
    color: rgb(var(--c-neutral-lightest));
    padding: 0.2rem 0.5rem;
    transition: background-color ease 0.3s;
}

@media (hover: hover) {
    .selected__object button:hover {
        background: rgb(var(--c-neutral-darkest));
        color: rgb(var(--c-neutral-lightest));
    }
}

.selected__object .fa-regular {
    font-size: var(--f-size-s-2);
}


/* Slider */
.staff__slider.grid__main {
    display: grid;
    grid-column: span 5;
}
.staff__slider > div.slider__prev {
    grid-column: 2;
}

.staff__slider > div.slider__itemwrap {
    grid-column: 3;
}

.staff__slider > div.slider__next {
    grid-column: 4;
}

.staff__slider .slider__item {
    position: absolute;
    top: 0;
}

.staff__slider .slider__prev svg,
.staff__slider .slider__next svg {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 20px;
    height: 40px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.staff__slider .slider__prev svg {
    left: 0;
}

.staff__slider .slider__next svg {
    right: 0;
}

.staff__slider .slider__prev,
.staff__slider .slider__next {
    position: relative;
}

.staff__slider .slider__prev.disabled,
.staff__slider .slider__next.disabled {
    display: none;
}

.staff__slider .slider__itemwrap {
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 0;
    padding-bottom: 10px;
    width: 100%;
}

.staff__slider svg {
    fill: none;
    stroke: rgb(var(--c-neutral-dark));
    stroke-width: 2;
}

.staff__slider .slider__iteminner {
    position: relative;
    margin: 0 1rem;
    border: 1px solid rgb(var(--c-neutral-light));
}

.staff__slider .staff__name {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0.5rem 1rem;
    background: rgba(var(--c-neutral-lightest), 0.8);
}

@media (hover: hover) {
    .staff__slider svg:hover {
        stroke: rgb(var(--c-primary));
    }
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 640px) {

    .staff__list[data-columns="4"],
    .staff__list[data-columns="5"],
    .staff__list[data-columns="6"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .staff {
        grid-template-columns: 1fr;
    }

}

@media (min-width: 900px) {

    .staff__list[data-columns="3"],
    .staff__list[data-columns="5"],
    .staff__list[data-columns="6"] {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (min-width: 1280px) {

    .staff__list[data-columns="4"] {
        grid-template-columns: repeat(4, 1fr);
    }

    .staff__list[data-columns="5"] {
        grid-template-columns: repeat(5, 1fr);
    }

    .staff__list[data-columns="6"] {
        grid-template-columns: repeat(6, 1fr);
    }


}