/* ============================================================
   БАННЕРЫ РАЗДЕЛОВ — НАСТРОЙКА
   ============================================================

   Здесь меняются картинки боковых баннеров, которые стоят
   на форуме и в магазине. Меняете только имя файла в url(...),
   больше ничего искать не нужно.

   Файлы лежат в  templates/noctis/img/shops/

   Этот файл подключается на всех страницах сайта, поэтому
   работает и на форуме, и в магазине — в отличие от
   modules_extra/newhome/config.php, который выполняется
   только на главной.
   ============================================================ */

:root{
  /* ---- КАРТИНКИ (меняйте только имя файла) ---- */
  --banner-stats: url("../img/shops/bstatssep.png");
  --banner-mut:   url("../img/shops/bgbanmutsep.png");

  /* ---- ВЫСОТА БАННЕРА ---- */
  --banner-height: 510px;

  /* ---- КАК ВПИСЫВАТЬ КАРТИНКУ ----
     cover     — растянуть до заполнения блока: маленькая увеличится,
                 большая уменьшится, полей не будет, но края могут
                 немного обрезаться. Пропорции сохраняются. (сейчас)
     contain   — показать картинку целиком, по краям останутся поля.
     100% 100% — растянуть точно по блоку без обрезки, но пропорции
                 исказятся, если картинка другой формы. */
  --banner-fit: cover;
}

.bannerstats{background-image: var(--banner-stats) !important}
.bgbanmut{background-image: var(--banner-mut) !important}

/* bannerpravila трогаем только по размеру: своя картинка у него
   уже прописана в mystyles.css, здесь её можно переопределить,
   раскомментировав строку ниже */
/* .bannerpravila{background-image: var(--banner-rules) !important} */

/* Вписывание вместо обрезки — общее для всех трёх */
.bannerstats,
.bgbanmut,
.bannerpravila{
  height: var(--banner-height) !important;
  max-height: 70vh;
  background-size: var(--banner-fit) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* На узких экранах баннер в 510px занимает почти весь экран */
@media (max-width: 991.99px){
  :root{--banner-height: 320px}
}