borbad.s5l.ru/vue/app/pages/Home/index.styl

// app/pages/Home/index.styl

.hero-section
  margin-top: -2rem
  
.event-card
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
  
  &:hover
    transform: translateY(-8px)
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25)
    
.line-clamp-2
  display: -webkit-box
  -webkit-line-clamp: 2
  -webkit-box-orient: vertical
  overflow: hidden

// Анимация появления карточек
@keyframes fadeInUp
  from
    opacity: 0
    transform: translateY(30px)
  to
    opacity: 1
    transform: translateY(0)

.event-card
  animation: fadeInUp 0.6s ease forwards
  
  &:nth-child(1)
    animation-delay: 0.1s
  &:nth-child(2)
    animation-delay: 0.2s
  &:nth-child(3)
    animation-delay: 0.3s
  &:nth-child(4)
    animation-delay: 0.4s
  &:nth-child(5)
    animation-delay: 0.5s
  &:nth-child(6)
    animation-delay: 0.6s

// Адаптивность для мобильных устройств
@media (max-width: 768px)
  .hero-section
    margin-top: 0
    
  .event-card
    margin-bottom: 1.5rem