/* ===== ОСНОВНЫЕ НАСТРОЙКИ HERO ===== */

.hero {
  width: 100%;                                      /* Ширина Hero */
  max-width: 1440px;                                /* Максимальная ширина Hero */
  height: 500px;                                    /* Высота Hero */
  padding: 0;                                       /* Внутреный отступ */
  margin: 10px auto 0 auto;                         /* Отступ сверху */
  box-sizing: border-box;                           /* Чтобы отступы не увеличивали общую высоту */
  border: 0 solid #0000000d;                        /* Тонкая рамка: задавайте HEX-цвет и прозрачность */
  border-radius: 5px;                              /* Скругление углов */
  box-shadow: 0 4px 20px #00000059;                 /* Тень панели */
  position: relative;                               /* Основа для будущих элементов */
  overflow: hidden;                                 /* Скрываем выходящие элементы */
  background-color: #0000000d;                      /* Цвет фона и прозрачность */
  backdrop-filter: blur(5px);                       /* Размытие фона */
  -webkit-backdrop-filter: blur(5px);               /* Размытие для Safari */
  background-image: linear-gradient(to top, #00000099, #00000000), url('../images/hero.webp'); /* Картинка с градиентом */
  background-size: cover;                           /* Заполняем весь Hero */
  background-position: center center;               /* Центрируем картинку */
  background-repeat: no-repeat;                     /* Без повторения */
}