@charset "UTF-8";
/* Первый экран «Афиши». Фото — на верхние 680 (квадрат 1350 / 1350 / 1440, сдвинут вверх на 378 / 378 / 478),
   заголовок H2 зелёный (низ — на 418 / 418 / 400 от верха), под ним лента event-slider.
   Секция поверх следующей (z-index 1): лента наезжает на League, наезд задаёт league-banner. */
.events-hero {
  position: relative;
  isolation: isolate;
  z-index: 1;
  padding-top: 22.375rem;
}
@media (min-width: 768px) {
  .events-hero {
    padding-top: 21.5rem;
  }
}
@media (min-width: 1280px) {
  .events-hero {
    padding-top: 19.75rem;
  }
}
.events-hero__media {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 42.5rem;
  overflow: hidden;
  background-color: var(--color-black);
}
.events-hero__image {
  position: absolute;
  top: -23.625rem;
  left: 50%;
  width: 84.375rem;
  max-width: none;
  height: 84.375rem;
  object-fit: cover;
  transform: translateX(-50%);
}
@media (min-width: 1280px) {
  .events-hero__image {
    top: -29.875rem;
    width: max(100%, 90rem);
    height: auto;
    aspect-ratio: 1;
  }
}
.events-hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 0.96;
}
@media (min-width: 768px) {
  .events-hero__title {
    font-size: 3.5rem;
    line-height: 0.92;
  }
}
@media (min-width: 1280px) {
  .events-hero__title {
    font-size: 4rem;
    line-height: 0.94;
  }
}
.events-hero__title {
  margin-bottom: 0.875rem;
  color: var(--color-green);
  padding-inline: 0.875rem;
}
@media (min-width: 768px) {
  .events-hero__title {
    padding-inline: 1.375rem;
  }
}
@media (min-width: 1280px) {
  .events-hero__title {
    padding-inline: 1.75rem;
  }
}
@media (min-width: 768px) {
  .events-hero__title {
    margin-bottom: 1.375rem;
  }
}
@media (min-width: 1280px) {
  .events-hero__title {
    margin-bottom: 1.5rem;
  }
}