Правило @container позволяtт динамически управлять стилями дочернего HTML-элемента в зависимости от размера родительского контейнера, содержащего этот элемент. Запросы для контейнеров работают также как и медиа-запросы.

Чтобы воспользоваться всеми преимуществами at-rule правила @container, в первую очередь, необходимо определить контекст контейнера родительского элемента, с помощью свойства container-type:

1. container-type: size;: это значение свойства позволяет выполнять запросы как по ширине, так и по высоте;
2. container-type: inline-size;: это значение свойства, позволяет выполнять запросы только по ширине.

Посмотрим на простейший пример для HTML-разметки условной карточки товара:

<div class="post">
    <div class="card">
        <h2>Наименование</h2>
        <p>Описание товара</p>
    </div>
</div>

размер и цвет шрифта дочернего элемента h2 будет меняться при увеличении ширины родителя post до 700 пикселей и более:

.post {
    container-type: size;
}

.card h2 {
    font-size: 1em;
    color: blue;
}

@container (min-width: 700px) {
    .card h2 {
        font-size: 5em;
        color: purple;
    }
}

Подробную информацию также можно изучить на MDN.

Спасибо за внимание.