Основа 6 XY Grid Создание семантически адаптивного синтаксиса

Question

Поэтому я решил не использовать классы по умолчанию для создания моих компонентов на веб-сайте.

Я использую синтаксис "Сборка семантически", но я думаю, что я должен делать что-то не так, поэтому ниже приведен HTML-макет моего компонента и для сравнения я использую классы по умолчанию, чтобы убедиться, что он обычно одинаков.

Мне удалось заставить его реплицировать компоновку, включая интервал между полями, но, похоже, мне нужно определить точку останова, если я хочу, чтобы поле уменьшилось на экранах меньшего / большего размеров, что, я уверен, будет сделано без необходимости использовать точки останова?

Я предполагал, что это уменьшится в размере, поскольку я действительно не хочу добавлять целую нагрузку точек останова для этого?

Поэтому, если вы не включите точку останова, размер поля останется прежним, тогда как классы по умолчанию изменятся в зависимости от размера, что вытеснит все из строки

HTML-макет

 <div class="contain">
    <div class="wrapper">
        <div class="site-header__logo">
            Test
        </div>
    </div>
    <div class="grid-x grid-margin-x">
      <div class="cell">
            Test
      </div>
    </div>
</div>

SCSS

.contain {
   @include xy-grid-container;
}

.wrapper {
    @include xy-grid();
    @include xy-gutters($negative: true);
}

.site-header__logo {
    @include xy-cell(2);
    @include breakpoint(medium up) {
        @include xy-cell(2, $breakpoint: medium);
    }
}