Тег hr имеет семантическую нагрузку, заменяет разделитель смысловых разделов.
Т.е. можно обернуть ваш контент в секции, задать им border и избавиться от hr
Либо просто задать бордер тем тегам, которые у вас есть сейчас.
Так будет и семантичнее и задачу решит.
Скажу банальную вещь: сайт должен хорошо выглядеть на любой ширине вьюпорта.
Поэтому, использовать те брейкпоинты, которые лучше всего для этого подходят.
А ещё, можно весь сайт сделать в vw и clamp, тогда вообще можно обойтись без media.
Так что ваш вопрос без конкретики не имеет смысла.
Расставьте гридами как вам хочется. Элементарно 2х2.