carousels.pcss

.header-carousel {
  display: block;
  margin: 0 auto;
  position: relative;


  .header-carousel--text-wrapper,
  .elections--header-carousel--text-wrapper,
  .onboarding--header-carousel-text-wrapper {
    @apply font-alt text-5xl uppercase w-[98vw] absolute
  }

  .header-carousel--text-wrapper, .elections--header-carousel--text-wrapper {
    @apply lg:text-7xl
  }

  .onboarding--header-carousel-text-wrapper {
    @apply lg:text-6xl
  }

  .header-carousel--text-wrapper {
    bottom: 37%;
    height: 85%;

    @screen xl {
      bottom: 33%;
    }
  }


  .elections--header-carousel--text-wrapper {
    bottom: 45%;
    height: 85%;

    @screen xl {
      bottom: 10%;
    }
  }


.header-carousel--image {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;

    @apply w-screen absolute object-cover h-full;
    @apply xl:h-[458px];

    @screen md {
      @apply h-full;
    }
  }

  @keyframes right_to_left {
    from {
      margin-left: 20%;
    }
    to {
      margin-left: 10%;
    }
  }
}