.course-promo-banners-section .container {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
}

.mei-course-promos {
  --mei-course-promo-radius: 10px;
  --mei-course-promo-shadow: 0 12px 28px rgba(var(--rgb-text), 0.06);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  width: 100%;
}

.mei-course-promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  min-height: 142px;
  align-items: center;
  overflow: hidden;
  background: var(--mei-course-promo-bg, var(--color-white));
  border: 1px solid rgba(var(--rgb-primary), 0.1);
  border-radius: var(--mei-course-promo-radius);
  box-shadow: var(--mei-course-promo-shadow);
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 22px, 0) scale(0.975);
  transform-origin: center bottom;
  animation: meiCoursePromoReveal 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--mei-course-promo-delay, 0ms);
  will-change: opacity, transform, filter;
}

.mei-course-promo--kids {
  --mei-course-promo-bg: linear-gradient(100deg, #fffaf4 0%, #ffffff 54%, #f8fbff 100%);
}

.mei-course-promo--ielts,
.mei-course-promo--tests {
  --mei-course-promo-bg: linear-gradient(100deg, #fff2f2 0%, #ffffff 56%, #fff8f8 100%);
}

.mei-course-promo--step,
.mei-course-promo--english,
.mei-course-promo--computer {
  --mei-course-promo-bg: linear-gradient(100deg, #f4f9ff 0%, #ffffff 56%, #f7fbff 100%);
}

.mei-course-promo__media {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 100%;
  opacity: 0;
  transform: translate3d(-12px, 0, 0) scale(0.98);
  animation: meiCoursePromoMediaReveal 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--mei-course-promo-delay, 0ms) + 150ms);
  will-change: opacity, transform;
}

.mei-course-promo__image {
  display: block;
  width: min(100%, 128px);
  max-height: 112px;
  object-fit: contain;
}

.mei-course-promo__content {
  min-width: 0;
  padding: 15px 20px 15px 8px;
  text-align: right;
  opacity: 0;
  transform: translate3d(14px, 0, 0);
  animation: meiCoursePromoContentReveal 0.54s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--mei-course-promo-delay, 0ms) + 105ms);
  will-change: opacity, transform;
}

.mei-course-promo__title {
  margin: 0 0 6px;
  color: var(--color-primary-dark);
  font-size: clamp(1.05rem, 1.65vw, 1.32rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

.mei-course-promo__desc {
  margin: 0 0 12px;
  color: #667085;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
}

.mei-course-promo__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  min-height: 36px;
  padding: 0 18px;
  color: var(--color-white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  background: var(--color-accent-light);
  border: 0;
  border-radius: var(--mei-course-promo-radius);
  box-shadow: 0 8px 18px rgba(var(--rgb-accent), 0.18);
}



.course-promo-banners-section:not(.is-in-view) .mei-course-promo,
.course-promo-banners-section:not(.is-in-view) .mei-course-promo__content,
.course-promo-banners-section:not(.is-in-view) .mei-course-promo__media {
  animation-play-state: paused;
}

.course-promo-banners-section.is-in-view .mei-course-promo,
.course-promo-banners-section.is-in-view .mei-course-promo__content,
.course-promo-banners-section.is-in-view .mei-course-promo__media {
  animation-play-state: running;
}
@keyframes meiCoursePromoReveal {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes meiCoursePromoContentReveal {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes meiCoursePromoMediaReveal {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mei-course-promo,
  .mei-course-promo__content,
  .mei-course-promo__media {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
    will-change: auto;
  }
}

@media (max-width: 980px) {
  .mei-course-promos {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
  }
}

@media (max-width: 430px) {
  .mei-course-promo {
    grid-template-columns: minmax(0, 1fr) 104px;
    min-height: 132px;
  }
.mei-course-promo__image {
    width: min(100%, 104px);
    max-height: 98px;
  }

  .mei-course-promo__content {
    padding: 13px 14px 13px 8px;
  }

  .mei-course-promo__title {
    font-size: 1.12rem;
  }

  .mei-course-promo__desc {
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.6;
  }

  .mei-course-promo__button {
    min-width: 104px;
    min-height: 36px;
    font-size: 13px;
  }
}