/**
    Override SplideJS classes
*/

button.splide__arrow {
    fill: rgba(0,0,0,0.5);
    background: #f1f7fa;
    border-radius: 2px 0 0 2px;
    font-size: 1.5em;
    margin: auto 1rem;
}

@media(min-width:768px) {
    button.splide__arrow {
        font-size: 2em;
        margin: auto 5rem;
    }
}

.splide__arrow--prev {
    left: 0;
}

.splide__arrow--next {
    right: 0;
}

/* gallery image shown */
.splide__slide img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: contain;
}

@media(min-width: 768px) {
    .splide__slide img {
        border-radius: 4px;
    }
}

/* thumbnail image */
.splide__slide-js {
    margin: 0.15rem;
    max-height: 75px !important;
}

    .splide__slide-js.is-active {
        -webkit-box-shadow: 0 0 0 2px rgba(0, 112, 193, 0.6);
        box-shadow: 0 0 0 2px rgba(0, 112, 193, 0.6);
    }

    .splide__slide-js img {
        border-radius: 4px;
    }

.splide__slide {
    border-radius: 4px;
    border: none !important;
    transition: none !important;
    display: flex;
    justify-content: center;
}

.splide__slide--opacity {
    opacity: 0.5 !important;
}

    .splide__slide.is-active {
        opacity: 1 !important;
    }