.slider-stories-block {
  overflow-x: clip;
  padding   : 120px 0 120px 0;
}

.slider-stories-block:has(.gradient.curve-effect) {
  padding: 120px 0 220px 0;
}

.slider-stories-list {
  gap  : 20px;
  /*width: fit-content;*/
}

.slider-story-card {
  height       : 433px;
  /* height    : 1; */
  width        : 325px;
  border-radius: 24px;
  overflow     : hidden;

  transition-property: height, opacity;
  transition-duration: var(--slow-anim-duration);
}

.slider-story-card.visible {
  height: 433px;
}

.slider-stories-block .slider-stories-texts {
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
}

.slider-story-card-texts {
  padding: 24px 16px;
  height : fit-content;
  z-index: 1;
  max-width: 85%;
}

.slider-stories-texts .cta_wrapper,
.slider-stories-texts h2 {
  padding: unset;
}

.slider-story-card-texts .cta_wrapper {
  padding-top: unset;
}

.social-banner .slider-story-card-title p {
  font-size       : 18px;
  font-weight     : 400;
  color           : var(--neutral-w);
  background-color: var(--primary-t2);
  padding         : 4px  8px;
  margin-left: 16px;
  margin-bottom: -4px;
  position: relative;
  max-width: 80%;


}

.social-banner .slider-story-card-description p {
  font-size: 14px;
   background-color: var(--neutral-k10);
    color           : var(--neutral-w);
    padding: 8px;
}


.slider-stories-block .swiper-notification {
  position: absolute;
}


.color-black * {
  color: var(--neutral-w);
}

.slider-stories-block.social-banner:has(.gradient.curve-effect) {

  padding-top   : 100px;
  padding-bottom: 0;
}

.slider-stories-block.social-banner .slider-stories-block-wrapper {  
  padding-bottom  : 120px;
}

.slider-stories-block.social-banner .curve-effect {
  top: 0;
}





.story-content {
  display        : flex;
  align-items    : flex-end;
  flex-direction : column;
  justify-content: end;
}

.story-content .align-self-start {
  align-self: flex-start;
}

.story-progress-container {
  position: absolute;
  top     : 16px;
  left    : 16px;
  right   : 16px;
  display : flex;
  gap     : 4px;
  z-index : 3;
}

.story-progress-segment {
  flex  : 1;
  height: 3px;

  border-radius: 3px;
  background   : rgba(255, 255, 255, 0.50);
  border-radius: 2px;
  overflow     : hidden;
}

.story-progress-bar {
  height          : 100%;
  width           : 0%;
  background-color: white;
  border-radius   : 2px;
  transition      : width 0.1s ease-in-out;
}

.story-progress-bar.active {
  animation: progressFill 5s linear forwards;
}

.story-progress-bar.completed {
  width: 100%;
}

@keyframes progressFill {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

.story-content-container {
  position: relative;
  width   : 100%;
  height  : 100%;
}

.story-content {
  position  : absolute;
  width     : 100%;
  height    : 100%;
  opacity   : 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.story-content.active {
  opacity   : 1;
  visibility: visible;
}

.story-play-pause-btn {
  position: absolute;
  bottom  : 20px;
  right   : 16px;


  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;

  z-index   : 3;
  transition: all 0.3s ease;
}



.story-play-pause-btn .pause-icon {
  display: none;
}

.story-play-pause-btn.paused .play-icon {
  display: none;
}

.story-play-pause-btn.paused .pause-icon {
  display: block;
}

.slider-stories-list-wrapper .slider-swiper-arrow {
  margin-top: 44px;
}

@media screen and (max-width: 1024px) {
  .slider-stories-texts {
    padding-left : 24px;
    padding-right: 24px;
    text-align: center;
  }

  .slider-stories-block.social-banner .slider-stories-block-wrapper {
    padding-bottom: 80px;
  }

  .slider-stories-block.social-banner:has(.gradient.curve-effect) {
    padding-top     : 80px;
    background-color: var(--neutral-k10);
  }

  .slider-stories-block.social-banner .curve-effect {
    top: -19px;
  }

  .slider-stories-list-wrapper {
    width         : 100%;
    overflow      : hidden;
    display       : flex;
    flex-direction: column;
    gap           : 44px;
  }

  .slider-stories-block {
    height: fit-content;
  }

  .slider-stories-block-wrapper {
    position: relative;
    gap     : 40px;
  }

  .slider-stories-list {
    padding: unset;
    gap    : unset;
    width  : calc(100% - 48px);
  }

  .slider-story-card {
    width    : 100%;
    max-width: 327px;
  }

  .slider-stories-block {
    padding: 40px 0px 80px 0px;
  }


  .slider-stories-list-wrapper {
    display: block;
  }

  /* .slider-story-card {
    width: calc(100% - 40px);
  } */

  .slider-stories-block .slider-stories-texts {
    padding-bottom: 40px;
  }
}