Анимации, переходы и трансформации — Баннеры и промо-блоки

.banner {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(120deg, #1e3a5f, #2563eb);
}

.slide {
  position: absolute;
  inset: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}