Илья Корень

Объекты - ссылочый тип данных, когда какой-либо переменной мы присваиваем значение объекта, то мы присваиваем ссылку на этот объект, который хранится в памяти.

1. Вы в функцию swap передаете аргументом объект cat
2. feline.name = 'Wild';
Здесь мы меняем свойство name объекта cat на 'Wild'
Теперь у нас в памяти хранится объект:

cat: {
   name: 'Wild'
}

3. Далее вы меняете аргумент на другой объект, т.е.вы аргументу функции передаете ссылку на новый, другой объект:
feline = {name: 'Tabby'};
По итогу у нас есть 2 объекта в памяти:

cat: {
   name: 'Wild'
}
{
   name: 'Tabby'
}

Если вы замените это feline = {name: 'Tabby'} на cat = {name: 'Tabby'}, то получите ожидаемый результат.

если стили написаны для элементов, которые будут отображаться только при 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.

Добавьте в условие:

if (footerInput.value === '' || !footerInput.checked)

Добрый день.
Когда вы задаете элементу position: absolute, то он скажем так теряет свое положенное место на странице и может лежать где угодно, все зависит от того где вы его расположите.
Если вы ему укажите:

.bg-block {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

то он будет такого же размера как и родитель и будет там же, где и родитель.
Вы указали высоту больше, чем у родителя: 103% и сдвинули его относительно родителя, соответственно он и выходит за рамки.
left - определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента.
top - определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента

Не вижу у вас закрывающего тега у <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);
}