.promo-section {}

.promo-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0px;
    width: 100%;
    height: 10rem;
    margin: 5px 0;
    padding-bottom: 0;
}

.promo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(70%);
    transition: transform 0.5s ease;
}

.promo-container:hover .promo-img {
    transform: scale(1.05);
}

.promo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 2;
}

.promo-overlay h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.promo-overlay p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.promo-container { position: relative; overflow: hidden; }
.promo-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.promo-slide.is-active { opacity: 1; z-index: 1; }

.promo-dots {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}
.promo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: 0; cursor: pointer;
  transition: transform .2s, background .2s;
}
.promo-dot.is-active { background: #fff; transform: scale(1.2); }

@media (max-width: 1024px) {

  .promo-container {
    height: 9rem;
  }

  .promo-overlay h2 {
    font-size: 1.8rem;
  }

  .promo-overlay p {
    font-size: 1.1rem;
  }

}

@media (max-width: 768px) {

  .promo-container {
    height: 8rem;
  }

  .promo-overlay h2 {
    font-size: 1.5rem;
  }

  .promo-overlay p {
    font-size: 1rem;
  }

  .promo-dots {
    bottom: 6px;
  }

}

@media (max-width: 480px) {

  .promo-container {
    height: 7rem;
  }

  .promo-overlay h2 {
    font-size: 1.2rem;
    margin-bottom: 6px;
  }

  .promo-overlay p {
    font-size: 0.85rem;
    margin-bottom: 10px;
  }

  .promo-dots {
    gap: 4px;
    bottom: 5px;
  }

  .promo-dot {
    width: 6px;
    height: 6px;
  }

}