/* =============================================================
   UTILITIES / DISPLAY
   
   !important используется только там, где утилита должна
   победить любое правило компонента (скрыть/показать).
   ============================================================= */

/* Скрыть/показать — с !important, потому что у компонента
   обычно свой display, и утилита должна его перебить. */
.hide {
    display: none !important;
}

.show {
    display: block;
}

/* Быстрая смена раскладки — тоже с !important, чтобы
   не бороться со специфичностью компонента. */
.flex {
    display: flex !important;
}

.grid {
    display: grid;
}

.contents {
    display: contents;
}

/* Позиционирование */
.relative {
    position: relative;
}

/* Белый пробел */
.nowrap {
    white-space: nowrap;
}