Илья Корень

если стили написаны для элементов, которые будут отображаться только при min-width: $screen-md - тогда нет.
Нет смысла, т.к. во всех других брейкпоинтах этих элементов тупо не будет, т.к. будет display: none.
Стили с использованием медиа запросов нужно писать тогда, когда логика это подразумевает, когда элемент при разной ширине экранов должен выглядит по-разному. В остальных случаях нет.

Добрый день.
Вам нужно добавить:

.practice-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.practice-item-link {
  height: 100%;
}

https://codepen.io/IlyaKoren/pen/OJEPEQz

по идее все у вас работает.
Бордера не видно из-за outline.
Пропишите инпуту: outline: none

Да, через флекбокс, с помощью свойства flex-grow
https://codepen.io/pen

update: + увидел вопрос, что в рамках одной строки должно быть не больше 2х блоков и должен быть перенос.
В такой случае - вам нужно ограничить ширину флекс-контейнера, чтобы в нем помещалось не более 2х флекс-элементов. И добавить свойство: flex-wrap.

Не вижу у вас закрывающего тега у <div class="product__item">
Должно быть так:

<div class="procuct">
    <div class="product__item">
       <img src="/img/product1.png" alt="">
       <p class="product__title">Прессованная плитка</p>
    </div>
    <div class="product__item">
       <img src="/img/product1.png" alt="">
       <p class="product__title">Прессованная плитка</p>
    </div>
    <div class="product__item">
       <img src="/img/product3.png" alt="">
       <p class="product__title">Садовый бордюр</p>
   </div>
</div>

Основной посыл в том, что flex-контейнер должен быть оберткой флекс-элементам, т.е. флексы-элементы должны быть в него вложены.

Как вариант, ограничить ширину контейнера, а остальное забабахать например через flexbox.

display: flex;
flex-wrap: wrap.

Ну и задать размеры каждой ячейки.

Либо через гриды:

tr {
  display: grid;
  grid-template-columns: repeat(5, 50px);
  grid-template-rows: repeat(7, 40px);
}