@media (max-width: 640px) {

    .dreams-list__row {
        /* на мобиле: заголовок + чипы стопкой, стрелка справа */
        grid-template-columns: 1fr 20px;
        grid-template-rows: auto auto;
        grid-template-areas:
        "title  arrow"
        "kinds  arrow";
        gap: 6px 12px;
        padding: 12px var(--pad-small);
    }

    .dreams-list__title {
        grid-area: title;
        font-size: 14px;
        white-space: normal;
    }

    .dreams-list__kinds {
        grid-area: kinds;
    }

    .dreams-list__arrow {
        grid-area: arrow;
        align-self: center;
    }
}