.thumbnail {
  margin: 0.5rem;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
  width: 80px;
  height: 80px;
  transition:all .1s ease-in-out;
  border: 3px solid transparent;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.thumbnail.active, .thumbnail:hover {
  border: 3px solid var(--accent-color);
}
.story__slider {
  width: 450px;
  /* height: 800px; */
  border-radius: 6px;
  overflow: hidden;
}
.story__slide {
  position: relative;
  .figcap {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: #303030;
    }
}
.story__slide video,
.story__slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.story__pagination {
  bottom: unset !important;
  top: 8px !important;
  display: flex;
  padding: 0 4px;
}
.story__pagination .swiper-pagination-bullet {
  flex-grow: 1;
  border-radius: 100vh;
  height: 3px;
  margin: 0 2px !important;
  background-color: rgba(247, 247, 245, 0.4);
  opacity: 1;
}
.story__pagination .swiper-pagination-bullet .swiper-pagination-progress {
  height: 100%;
  width: 0%;
  border-radius: 100vh;
  background-color: var(--accent-color);
}
.story__prev, .story__next {
  height: 100% !important;
  width: 20% !important;
  top: 0 !important;
  margin-top: 0 !important;
  cursor: pointer !important;
}
.story__prev {
  left: 0;
}
.story__next {
  right: 0;
}
.story__prev:after, .story__next:after {content:'' !important}
.story {
  border: 0;
  background-color: transparent;
  /* margin: 0 5px; */
}
.story__popup {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #fff;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);z-index: 1001;display: none;border-radius: 8px;}
.story__popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
display: none;
}
.story__popup.active,
.story__popup-overlay.active {
display: block;
}