.slick-slider {
    display: flex;
}

.slick-slide {
    filter: grayscale(1);
    transition: filter 0.7s;
}

.slick-slide.slick-current {
    filter: grayscale(0);
}

.slick-slide {
    margin: 0 1em;
}

.image-slider-single:hover img, .image-slider-single:focus img {
    outline: 3px double black;
    cursor: pointer;
}

.panel-slider__arrow {
    width: 10%;
    text-align: center;
    color: var(--black);
    margin: 1em;
    border: 0;
    background: none;
    padding: 1em;
    cursor: pointer;
}
.panel-slider__arrow:hover, .panel-slider__arrow:focus {
    color: orange;
}
.panel-slider__arrow::before {
    border-style: solid;
    border-width: 0.25em 0.25em 0 0;
    content: "";
    display: inline-block;
    height: 1em;
    left: 0.15em;
    position: relative;
    top: 0.15em;
    transform: rotate(-45deg);
    vertical-align: top;
    width: 1em;
}
.panel-slider__arrow--prev::before {
    left: 0.25em;
    transform: rotate(-135deg);
}
.panel-slider__arrow--next::before {
    left: 0;
    transform: rotate(45deg);
}

.slick-dots button:focus {
    outline: 2px solid black
}

@media only screen and (max-width: 768px) {
    .slick-dots {
        bottom: -60px;
    }
}