/** Type scale System */
/** 38px, 30px, 24px, 19px, 15px, 12.5px, 10px, 8px, 6px, 5px  */

/** Spacing System */
/** 160px, 96px, 80px, 64px, 48px, 40px, 32px, 24px, 16px, 12px, 8px, 4px, 2px */

/* Carousel starts */

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel__inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1);
  
}

.carousel__item {
  position: absolute;
  width: inherit;
  height: inherit;
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-38px);
  background-color: var(--bg-secondary-shade);
  border-radius: 50%;
}

.carousel__btn--left {
  left: 2%;
}

.carousel__btn--right {
  right: 2%;
}

.carousel__nav {
  position: absolute;
  bottom: 3%;
  display: flex;
  left: 50%;
  transform: translateX(-50%);
}

.dot {
  width: var(--spacing-8px);
  height: var(--spacing-8px);
  border-radius: 50%;
  background-color: #656055;
  margin-right: var(--spacing-8px);
  transition: all 0.6s cubic-bezier(0.45, 0, 0.55, 1);
}

.dot.active {
  background-color: var(--bg-secondary-tint);
  width: var(--spacing-24px);
  border-radius: var(--spacing-8px);
}

/* Carousel ends */