Почему не срабатывает медиа запрос?

Question

[fanus]

Хочу грид элементы по после уменьшения ширины до 1200px выстроить в колонку. Почему не получается?
//До медиа запроса
.main__form {
display: grid;
grid-template-columns: 4fr 4fr 4fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
'one two txt'
'three four submit';
gap: 20px;

<b> //медиа запрос:</b>
@media (max-width: 1200px) {
  .main__form {
    grid-template-areas:
      'one'
      'two'
      'three'
      'four'
      'txt'
      'submit';
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
  }
}

Comments

[fanus]

Все, решил. Использовал ID вместо класса и дописал вложения