.dynamic-stories {
  height: calc(var(--vh, 1vh) * 90);
  position: relative;
  padding-top: calc(var(--index) * 5);
}

.center {
  display: flex;
  flex-wrap: nowrap;
}

.stories-img {
  margin-top: calc(var(--index) * 1);
  will-change: transform;
  position: relative;
  width: 25vw;
  height: 60vh;
  margin-left: calc(var(--index) * 1);
  margin-right: calc(var(--index) * 1);
}

.stories-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: 110%;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.6s ease;
  z-index: 0;
  will-change: transform;
}

.stories-img:hover::before {
  transform: scale(1.05);
}

.stories-img::after {
  content: attr(data-name);
  will-change: transform;
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 1.5rem;
  color: #f1f1f1;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  font-family: 'Bebas', sans-serif;
}

.stories-img:hover::after {
  opacity: 1;
}

.bottom-content .left .title_stories {
    text-transform: uppercase;
}

@media (max-width: 900px) {
  .dynamic-stories {
    height: auto;
    padding-top: calc(var(--index) * 2.5);
    padding-bottom: calc(var(--index) * 5);
  }

  .center {
    height: 60vh;
  }


  .stories-img {
    width: 90vw;
  }

  .bottom-content {
        width: calc(100% - 5.5%);
  }

  .bottom-content  p {
    font-size: calc(var(--index) * 1);
  }
}