.embla {
  position: relative;
  width: 100%;
}

.embla__viewport {
  width: 100%;
  overflow: hidden;
}

.embla__container {
  display: flex;
  flex-flow: row nowrap;
}

@media (max-width: 768px) {
  .embla {

    --embla-dots: 5;
    --currentDotTop: 0;
    --currentDotLeft: 0;
    --dotWidth: 11px;
    --dotHeight: 11px;
    --container-gap: 4px;
    --container-width: calc((var(--dotWidth) + var(--container-gap)) * var(--embla-dots));

    --embla-dot-size: var(--dotWidth);
    --embla-dot-color: #fff9;
    --embla-dot-active-color: #fff;
    --embla-dot-shadow-color: rgba(0, 0, 0, 0.3);
    --embla-dot-shadow-size: 8px;
  }



  .embla__container {
    display: flex !important;
    flex-flow: row nowrap;
  }

  .embla__slide {
    flex: 0 0 100%;
  }

  .embla__dots {
    display: flex;
    margin-inline: auto;
    transition: transform 0.3s ease;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 22px;
    z-index: 10;
    overflow: hidden;
    width: var(--container-width);

    .container {
      display: flex;
      gap: var(--container-gap);
      transition: transform 0.3s ease;

    }

    .embla__dot {
      height: var(--embla-dot-size);
      width: var(--embla-dot-size);
      background-color: var(--embla-dot-color);
      flex: 0 0 var(--embla-dot-size);
      border-radius: 50%;
      opacity: 0;
      transform: scale(0);
      transition: transform 0.1s ease, opacity 0.5s ease;

      &.selected {
        transform: scale(1);
        background-color: var(--embla-dot-active-color);
        box-shadow: 0 0 var(--embla-dot-shadow-size) 0 var(--embla-dot-shadow-color);
      }

      &.visible {
        transform: scale(1);
        opacity: 1;
      }

      &.right {
        transform: scale(0.7);
        transform-origin: left;
      }

      &.left {
        transform: scale(0.7);
        transform-origin: right;
      }
    }
  }





  .embla__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 10;
    overflow: hidden;
    color: #fff;
    font-size: 18px;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    line-height: 1.1;
  }

  .pagination-wrapper {
    display: flex;
    align-items: center;
  }

  .pagination-number {
    display: inline-block;
    min-width: 1ch;
    text-align: center;
    margin-right: 5px;
  }

  @keyframes slideOutUp {
    to {
      transform: translateY(-50%);
      opacity: 0;
    }
  }

  @keyframes slideOutDown {
    to {
      transform: translateY(50%);
      opacity: 0;
    }
  }

  @keyframes slideInUp {
    from {
      transform: translateY(50%);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideInDown {
    from {
      transform: translateY(-50%);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}