.hero-slider{
  height:100vh;
  transition:var(--transition-fast);
  width:100%;

  img,
  video{
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
    width:100%;
  }

  .swiper-wrapper,
  .swiper-slide{
    height:100%;
  }

  .swiper-button-prev,
  .swiper-button-next{
    color:var(--color-text-secondary);
    top:auto;

    @media (width < 1024px){
      background-color:var(--color-black);
      bottom:var(--space-md);
      height:4.4rem;
      width:4.4rem;
    }

    @media (width >= 1024px){
      background-color:var(--color-black);
      bottom:var(--space-xl);
      height:5rem;

      transition:var(--transition-fast);
      width:5rem;

      &:hover{
        background-color:var(--color-black);
        transform:scale(1.2);
      }
    }

    &::after{
      transition:var(--transition-fast);

      @media (width < 1024px){
        font-size:var(--font-size-xl);
      }

      @media (width >= 1024px){
        font-size:var(--font-size-2xl);
      }
    }
  }

  .swiper-button-next{
    @media (width < 1024px){
      right:var(--space-md);
    }

    @media (width >= 1024px){
      right:var(--space-xl);
    }
  }

  .swiper-button-prev{
    @media (width < 1024px){
      left:var(--space-md);
    }

    @media (width >= 1024px){
      left:var(--space-xl);
    }
  }

  .swiper-pagination-bullets{
    @media (width < 1024px){
      bottom:var(--space-md) !important;
    }

    @media (width >= 1024px){
      bottom:var(--space-xl) !important;
    }
  }

  .swiper-pagination-bullet{
    background-color:var(--color-brand-secondary);
    margin:0 1.2rem !important;

    @media (width < 1024px){
      height:var(--space-md);
      width:var(--space-md);
    }

    @media (width >= 1024px){
      height:2rem;
      width:2rem;
    }
  }
}