/* SLIDESHOW START */

.slideshow {
    max-width: 900px;
    margin: 72px auto 0;
}


/* Slideshow styles */
.slideshow__slide {
    width: 100%;
    display: none;
    border-radius: 0.5rem;
}

.slideshow__slide:first-child {
    display: block;
}

.slideshow__thumbnail--wrapper {
    text-align:center;
    margin-top:20px;
}

.slideshow__thumbnail {
    box-sizing: border-box;
    object-position: top;
    /* Align content to the top */
    width: 100px;
    height: auto;
    max-height: 70px;
    object-fit: cover;
    margin: 0 1px;
    cursor: pointer;
    border: 3px solid transparent;
    /* Transparent border to reserve space */
    border-radius: 0.5rem;
    /* Same border-radius as active state */
    opacity: 1;
    /* Default opacity for inactive thumbnails */
}

/* Hover state for thumbnails */
.slideshow__thumbnail:hover {
    opacity: 1;
    border-color: rgba(76, 76, 76, 0.3);
    /* Semi-transparent red border */
}

/* Active thumbnail styles */
.slideshow__thumbnail.active {
    border: 3px solid #E30000;
    /* Red border for active thumbnail */
    opacity: 1;
    /* Full opacity for active thumbnail */
}

/* SLIDESHOW END */