.splide {
    margin: 0 auto;
}

.splide__slide {
    aspect-ratio: 4 / 3;
    background: #ebebeb;
}

.splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumbnails {
    display: flex;
    flex-wrap: wrap;
    margin: -2px;
    padding: 0;
}

.thumbnail {
    width: 124px;
    overflow: hidden;
    list-style: none;
    cursor: pointer;
    opacity: 0.65;
    background-position: center;
    background-size: cover;
    flex: 0 0 calc(20% - 4px);
    margin: 2px;
    border-radius: 7px;
}

.thumbnail span {
    position: absolute;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .7);
    border-radius: 7px;
    text-align: center;
    color: white;
}

.thumbnail.is-active {
    opacity: 1;
    border: 2px solid #0d6efd;
    border-radius: 7px;
}

.thumbnail img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.hide-photo li:nth-child(n+6) {
    display: none
}