/* How it works section */
.how-it-works {
  text-align: center;
  grid-column: 1 / -1;
}

.how-it-works .section-title {
    margin-bottom: 24px;
}

.section-title {
  color: var(--text-text-default-color);
  margin: 0;
}

.how-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(50px);
  will-change: transform;
  transition: none;
}

/* Animation behavior for mobile view only */
.how-item.visible {
  transform: translateY(0);
  transition: transform 0.8s cubic-bezier(.39, .575, .565, 1) 0.2s;
}

.how-image {
  margin-bottom: 16px;
}

.how-image img {
  width: 100%;
  border-radius: var(--block-radius-m);
}

.how-item h2 {
  color: var(--text-text-default-color);
  margin: 0 0 4px 0;
}

.how-item p {
  color: var(--text-text-secondary-color);
  margin: 0;
}

.how-it-works .glide .glide__track .glide__slides {
  flex-direction: column;
  gap: 32px;
}

.how-it-works .glide .glide__bullets {
  display: none;
}

.glide__slides.animate-on-scroll {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Tablet */
@media (min-width: 768px) {
  /* Animation for slider view */
  .animate-on-scroll.visible .how-item {
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(.39, .575, .565, 1);
  }

  .animate-on-scroll.visible .glide__slide:nth-child(1) .how-item { transition-delay: 0.25s; }
  .animate-on-scroll.visible .glide__slide:nth-child(2) .how-item { transition-delay: 0.45s; }
  .animate-on-scroll.visible .glide__slide:nth-child(3) .how-item { transition-delay: 0.65s; }
  .animate-on-scroll.visible .glide__slide:nth-child(4) .how-item { transition-delay: 0.85s; }

  .how-it-works .glide .glide__track {
    width: calc(100% + 40px);
  }
 
  .how-it-works .glide .glide__track .glide__slides {
    flex-direction: unset;
    gap: unset;
  }

  /* Slider control styles */
  .how-it-works .glide .glide__bullets {
    margin-top: 32px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .how-it-works .glide .glide__track {
      width: calc(100% + 104px);
   }

   .how-it-works .section-title {
      margin-bottom: 32px;
   }

   .how-image {
      margin-bottom: 24px;
    }
    
  .how-item h2 {
    margin: 0 0 8px 0;
  }

  .how-it-works .glide .glide__bullets .glide__bullet:last-child {
    display: none;
  }
}

/* Desktop+ */
@media (min-width: 1440px) {
    .how-it-works .glide .glide__track {
      width: calc(100% + 164px);
   }
}