.carousel {
    width: 100%;
    max-width: 600px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 auto;
  }
  
  .viewport {
    display: flex;
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: relative;
  }
  
  .slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    transition: transform 0.5s ease-in-out;
  }
  
  .slide.active {
    transform: translateX(0%);
  }
  .dots {
    @apply flex gap-2 items-center justify-center w-full h-full;
  }
  /* .dot {
   &--payment {
    @apply bg-gray-400 w-2 aspect-square rounded-sm;
   }
    
    &--banner {
      @apply bg-white w-2 aspect-square rounded-sm
    }
  } */
  .dot--banner {
    @apply bg-gray-400 w-2 aspect-square rotate-45;
  }
  /* .dot_active {
    &--banner {
      @apply bg-primary-pink;
    }
    &--payment {
      @apply bg-gray-400;
    }
  } */
  .dot_active--banner {
    @apply bg-primary-pink;
  }
  .controls {
    display: flex;
    align-items: center;
    justify-content:space-between;
    margin-right: auto;
    margin-top: 10px;
    width: 100%;
    height: 20px;
  }
  

.slide_wrapper{
    /* Rectangle 4104 */
    font-family: 'Roboto';
width: 100%;
height: fit-content;
padding: 2rem 1rem;
background: #F7F7F7;
box-shadow: -10px -10px 21px #F8F7F7, 30px 30px 50px #DDDDDD, inset -20px -20px 30px #EBEBEB, inset 20px 20px 14px #FFFFFF;
border-radius: 28px;

}
.slide_title{
font-style: normal;
font-weight: 500;
font-size: 1.8rem;
line-height: 21px;
/* identical to box height */
letter-spacing: -0.408px;
text-transform: capitalize;
color: #797979;
margin-bottom: 1rem;
}

.note{
font-family: 'SF Pro Text';
font-style: normal;
font-weight: 500;
font-size: 1rem;
line-height: 1.1rem;
color: #5FAAF8;
margin: 0;
}