/*
 * Hero-баннер детальной страницы решения (single-solution.php)
 *
 * Для чего: .page__header-banner__layout--with-icon и __icon — новые классы,
 *           которых нет в компилированном бандле. Используются только для
 *           решений «По задачам» (светлый градиентный фон без фото) — там
 *           текст лежит слева, а 3D-иконка (solution_hero_icon) справа.
 *           Решения «По отраслям» используют штатный .dark-mode на фото-фоне
 *           и в этом CSS не нуждаются.
 * Когда: Подключается через enqueue_style в functions.php только на
 *        is_singular('solution')
 */

.page__header-banner__layout--with-icon {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.page__header-banner__icon {
    flex: 0 0 auto;
    width: 100%;
    max-width: 380px;
    height: auto;
}

@media (max-width: 1023px) {
    .page__header-banner__layout--with-icon {
        flex-direction: column;
        align-items: flex-start;
    }

    .page__header-banner__icon {
        max-width: 220px;
        align-self: center;
    }
}