/* =========================================
   БАЗОВЫЕ СТИЛИ (Мобильные устройства < 576px)
   ========================================= */
.hero {
  position: relative;
  padding-top: 120px;
  padding-bottom: 15px;
  /* background-image: url("img/hero_bg.svg"); */
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero .container {
  position: relative;
  flex-direction: row;
}

.hero:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  /* background: linear-gradient(0deg, #000 5.01%, rgba(0, 0, 0, 0) 80%); */
}

.hero__cont {
  display: flex;
  flex-direction: column; /* По умолчанию колонка */
}

.hero__col {
  display: flex;
  flex-direction: column;
}

.hero__title {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  width: min-content;
}

.hero__desc {
  font-size: 10px;
  margin-top: 10px; /* Небольшой отступ от заголовка */
}

/* На мобилках (< 576px) полностью прячем перчатку */
/*.hero__img {
  display: none;
}*/

/* =========================================
   От 576px (Ставим элементы в один ряд)
   ========================================= */
@media (min-width: 576px) {
  .hero {
    padding: 150px 0 50px;
  }

  .hero__cont {
    flex-direction: row; /* Ставим текст и картинку в ряд */
    justify-content: space-between; /* Текст слева, картинка справа */
    align-items: center; /* Центрируем по вертикали */
    gap: 20px; /* Минимальное расстояние между текстом и перчаткой */
  }

  .hero__col {
    flex: 1 1 auto; /* Текст занимает оставшееся свободное место */
  }

  .hero__img {
    display: block; /* Показываем перчатку */
    flex: 0 0 auto; /* ЗАПРЕЩАЕМ перчатке сжиматься, если текст слишком длинный */
  }

  .hero__img img {
    display: block;
    width: auto;
    max-height: 280px; /* Размер для маленьких экранов */
    object-fit: contain;
  }

  .hero__title {
    font-size: 60px;
  }
}

/* =========================================
   От 768px (Планшеты)
   ========================================= */
@media (min-width: 768px) {
  .hero {
    padding-top: 170px;
  }
  .hero__cont {
    gap: 40px;
  }
  .hero__title {
    font-size: 74px;
  }
  .hero__desc {
    font-size: 15px;
    margin-top: 15px;
  }
  .hero__img img {
    max-height: 380px; /* Увеличиваем перчатку */
  }
}

/* =========================================
   От 880px
   ========================================= */
@media (min-width: 880px) {
  .hero__cont {
    gap: 80px;
  }
}

/* =========================================
   От 1024px (Ноутбуки)
   ========================================= */
@media (min-width: 1024px) {
  .hero .container {
    height: 100%;
    display: flex;
    align-items: center; /* Центрируем весь блок, если секция высокая */
  }
  .hero__cont {
    width: 100%;
  }
  .hero__title {
    font-size: 89px;
  }
  .hero__desc {
    font-size: 18px;
    margin-top: 20px;
  }
  .hero__img img {
    max-height: 500px;
  }
}

/* =========================================
   От 1440px (Большие мониторы)
   ========================================= */
@media (min-width: 1440px) {
  .hero {
    padding-top: 180px;
  }
  .hero__title {
    font-size: 90px;
  }
  .hero__desc {
    font-size: 29px;
    margin-top: 30px;
  }
  .hero__img img {
    max-height: 700px; /* Максимальный размер перчатки */
  }
}

/* =========================================
   От 1921px (Огромные экраны)
   ========================================= */
@media (min-width: 1921px) {
  .hero {
    height: 80vh;
  }
  .hero__img img {
    max-height: 800px;
  }
}