/***********
*************** HERO SHELL
*****************************************/

/*************************************************************         HERO LAYOUT          ********************/

/* #region HERO LAYOUT */

/*==========================================================================
|                                HERO WRAPPER                              |
==========================================================================*/

.hero{
  border-bottom: 1px solid var(--line);
}

/*==========================================================================
|                                HERO TRACK                                |
==========================================================================*/

.hero-track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hero-track::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

/*==========================================================================
|                                HERO SLIDES                               |
==========================================================================*/

.hero-slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* #endregion HERO LAYOUT */


/*************************************************************         HERO CONTENT          ********************/

/* #region HERO CONTENT */

/*==========================================================================
|                              HERO PROGRESS DOTS                          |
==========================================================================*/

.hero-progress{
  display: flex;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 10px auto 14px;
  padding: 0;
}

.hero-progress-dot{
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(244,241,234,0.32);
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease;
}

.hero-progress-dot.is-active{
  background: var(--accent);
  transform: scale(1.25);
}

/* #endregion HERO CONTENT */