.stories-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80%;
  margin: 1.25rem auto;
  padding: 1.25rem;

  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stories-block.loaded {
  visibility: visible;
  opacity: 1;
}

.stories-block .stories-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.stories-block #stories {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

.stories-block #stories::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.stories-block .stories-title {
  padding: 0 0 1.25rem 0;
}

/* Style 1 */
.style_1 .stories-wrapper .stories.snapgram .story > .item-link {
  text-decoration: none;
  color: #333;
}

.style_1 .stories-wrapper .stories.snapgram .story > .item-link > .item-preview {
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 2px;
  background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
}

.style_1 .stories-wrapper .stories.snapgram .story > .item-link > .item-preview > * {
  border-radius: 50%;
  border: 3px solid #fff;
}

.style_1 .stories-wrapper .stories.snapgram .story.seen {
  opacity: 0.75;
}

.style_1 .stories-wrapper .stories.snapgram .story.seen > a {
  color: #999 !important;
}

.style_1 .stories-wrapper .stories.snapgram .story.seen > a > .item-preview {
  background: #999;
}

/* Style 2 */
.style_2 {
  width: 100%;
}

.style_2 .stories-wrapper .stories.snapgram .story {
  max-width: 12.5rem; /* rem(200) */
  width: 12.5rem;
  position: relative;
}

.style_2 .stories-wrapper .stories.snapgram .story > .item-link {
  text-decoration: none;
  color: #333;
  position: relative;
}

.style_2 .stories-wrapper .stories.snapgram .story > .item-link > .item-preview {
  max-height: 18.75rem; /* rem(300) */
  height: 22.5rem; /* rem(360) */
  border-radius: 10px; /* $border-radius */
}

.style_2 .stories-wrapper .stories.snapgram .story > .item-link > .item-preview img {
  transition: transform 0.3s ease;
}

.style_2 .stories-wrapper .stories.snapgram .story > .item-link > .item-preview img:hover {
  transform: scale(1.1);
}

.style_2 .stories-wrapper .stories.snapgram .story > .item-link .profile {
  width: 2.5rem; /* rem(40) */
  height: 2.5rem;
  position: absolute;
  border-radius: 50%;
  border: 2px solid #fff;
  top: 0.625rem; /* rem(10) */
  left: 0.625rem;
  object-fit: cover;
}

.style_2 .stories-wrapper .stories.snapgram .story > .item-link .info {
  position: absolute;
  bottom: 0.625rem; /* rem(10) */
  left: 0.625rem;
  color: #fff;
}

.style_2 .stories-wrapper .stories.snapgram .story > .item-link .info .name {
  font-weight: 700;
}

.style_2 .stories-wrapper .stories.snapgram .story.seen {
  opacity: 0.75;
}

.style_2 .stories-wrapper .stories.snapgram .story.seen > a {
  color: #999 !important;
}

.style_2 .stories-wrapper .stories.snapgram .story.seen > a > .item-preview {
  background: #999;
}

#zuck-modal-content .story-viewer .slides .item>.media {
  width: 50%;
}

/* Media query */
@media screen and (max-width: 768px) {
  .style_1 .stories-block {
    width: 100%;
    margin: 0.3125rem 0; /* rem(5) */
    padding: 0;
  }

  .style_1 .stories-block .stories-title {
    padding: 0 0 0.625rem 0; /* rem(10) */
  }
}