.hero-slider {
  &.slick-dotted.slick-slider {
    margin-bottom: 0;
  }

  .slick-slide {
    display: var(--display) !important;
    min-height: var(--min-height);
    align-items: center !important;
    justify-content: center !important;
  }

  .slick-dots {
    bottom: var(--space-md);
  }

  @media (min-width: 768px) {
    .slick-dots {
      bottom: var(--section-space);
      left: clamp(var(--gutter), calc(50vw - 720px), calc(100vw - var(--gutter)));
      text-align: left;
    }
  }

  .slick-dots li {
    width: auto;
    margin-inline: 0 var(--space-base);
    padding: 0;

    button {
      --btn-padding-inline: 0;
      --btn-padding-block: 0;

      width: 96px;

      &:before {
        content: '';
        width: 96px;
        height: 4px;
        border-radius: 10px;
        background-color: #D5DCEB;
        opacity: .5;
      }
    }

    &.slick-active button:before {
      opacity: .9;
    }
  }
}