/* Логотип портала в своих пропорциях — одно правило на портал и админку: вход, заставка загрузки, «сервис недоступен»,
   прелоадер админки. Портал подключает файл в App.razor (@Assets), админка — в index.html.

   .portal-logo — на самой картинке: задана высота (--portal-logo-height), ширина — по пропорциям картинки, но не шире
   --portal-logo-max-width; широкий логотип (8:1) сжимается внутри своей рамки (object-fit), а не растягивает страницу.
   Квадратный знак остаётся квадратом той же высоты. Скругление рамки — --portal-logo-radius (по умолчанию нет). */
.portal-logo {
  display: block;
  width: auto;
  height: var(--portal-logo-height, 54px);
  max-width: var(--portal-logo-max-width, 100%);
  object-fit: contain;
  border-radius: var(--portal-logo-radius, 0);
}

/* Плитка под квадратным знаком (вход портала и админки). Рамка — по картинке, с полем --portal-logo-tile-pad;
   слой формы повторяет рамку и меряет её пропорции (контейнер по размеру): плитка видна только у знака, близкого к
   квадрату (от 1:2 до 3:2). У широкого логотипа плитки нет, и пока картинка не загрузилась (рамка ещё узкая) — тоже.
   Решает CSS, без скрипта. Разметка:
   <div class="portal-logo-tiled">
     <span class="portal-logo-tiled__shape" aria-hidden="true"><span class="portal-logo-tiled__tile"></span></span>
     <img class="portal-logo" src="…" alt="" />
   </div>
   Цвет плитки — --portal-logo-tile, скругление — --portal-logo-tile-radius. */
.portal-logo-tiled {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  padding: var(--portal-logo-tile-pad, 5px);
}
.portal-logo-tiled > .portal-logo {
  position: relative;
  max-width: 100%;
}
.portal-logo-tiled__shape {
  position: absolute;
  inset: 0;
  container-type: size;
}
.portal-logo-tiled__tile {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--portal-logo-tile, transparent);
  border-radius: var(--portal-logo-tile-radius, 16px);
}
@container (min-aspect-ratio: 1/2) and (max-aspect-ratio: 3/2) {
  .portal-logo-tiled__tile { display: block; }
}