@charset "UTF-8";
/* CTA «Не теряйте, я на корте» — перенос section-cta из лендинга один в один (пропорции, поля, видео,
   типографика — значения лендинга, только для этой секции) + карточка «Связаться с нами».
   Пропорции блока 360/800 → md 768/1200 (в альбомной ориентации 768/900) → xl 1440/1600, контент прижат вниз.
   На xl подвал наезжает на низ видео (как в макете). */
.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 360/800;
  padding: 0 0.625rem 18%;
  overflow: hidden;
  background-color: var(--color-black);
}
@media (min-width: 768px) {
  .cta {
    aspect-ratio: 768/1200;
    padding: 0 1rem 27%;
  }
}
@media (min-width: 768px) and (orientation: landscape) {
  .cta {
    aspect-ratio: 768/900;
  }
}
@media (min-width: 1280px) {
  .cta {
    aspect-ratio: 1440/1600;
    margin-bottom: -14.75rem;
  }
}
@media (min-width: 1440px) {
  .cta {
    padding-inline: 1.125rem;
  }
}
.cta__media {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 212%;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .cta__media {
    width: 118%;
  }
}
.cta__video {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  object-fit: contain;
}
.cta__content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.cta__title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 3.75rem;
  line-height: 0.86;
  color: var(--color-green);
  text-align: center;
}
@media (min-width: 768px) {
  .cta__title {
    font-size: 6.875rem;
  }
}
@media (min-width: 1440px) {
  .cta__title {
    font-size: 16.25rem;
  }
}
.cta__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 22%;
}
@media (min-width: 768px) {
  .cta__bottom {
    margin-top: 14%;
  }
}
@media (min-width: 1280px) {
  .cta__bottom {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 0.5rem;
  }
}
.cta__label {
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-white);
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .cta__label {
    font-size: 1.125rem;
  }
}
@media (min-width: 1280px) {
  .cta__label {
    grid-column: span 3;
  }
}
.cta__cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
@media (min-width: 768px) {
  .cta__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }
}
@media (min-width: 1280px) {
  .cta__cards {
    grid-column: 7/span 6;
  }
}
.cta__booking {
  display: flex;
  gap: 0.375rem;
  margin-inline: -0.625rem;
  padding-inline: 0.625rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.cta__booking::-webkit-scrollbar {
  display: none;
}
@media (min-width: 768px) {
  .cta__booking {
    display: contents;
  }
}
.cta__card {
  flex: 0 0 14rem;
}