Антон Спирин

Примерно так: https://jsfiddle.net/rockon404/p5x64477/

Вы можете менять кривизну линии. Тут такая закономерность:

height: $value1;  
border-radius: 50%/$value2 $value3 0 0;

$value2 и $value3 должны быть меньше или равны $value1

@for $i from 1 through 100 {
  .rec#{$i} {
    padding: #{$i}px;
  }
}

Лучше сделайте по аналогии с Bootstrap. Разделите сущности по обязанностям, разделите свой container на container и row.
container ограничивает width и имеет margin: 0 auto; .
row это flex контейнер для col. И все правильно, свойстово flex-wrap: wrap. Но тогда у колонок помимо flex: 0 0 {value}%;, определите max-width: {value}%;, чтобы сетка не сыпалась.

В текущем варианте, ваша верстка не гибкая, так как контейнер не используешь без flex и как его сетку не используешь без ограничения ширины.

Примерно так:

.cotainer {
  width: $my-width-value;
  width: 100%;
  margin: 0 auto;
  padding-right: 15px;
  padding-left: 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col {
  flex: 0 0 $col-width:
  max-width: $col-width:
  padding-right: 15px;
  padding-left: 15px;
}

Можно так: https://jsfiddle.net/geqkr0jv/
Но height в родителях используется.
Тут только в body, html https://jsfiddle.net/esp3cv49/

Потому-что вы используете float сетку, но не используете clearfix. Почитайте, что это такое и для чего. А пока добавьте всем контейнерам c float элементами класс clearfix, с таким кодом:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Подобные анимации реализуют с помощью :hover + transition.
https://codepen.io/vincebrown/pen/bNNpmY
https://codepen.io/nathanlong/pen/MwOpxj
https://codepen.io/caesura/pen/EZpNjw
https://codepen.io/tonrudny/pen/KgaZoY

Причина в относительном позиционировании .R-col с z-index: 20.
Поэтому безразлично сколько вы ставите z-index модальному окну, пока оно дочернее .R-col, оно всегда будет под .modal-blacktop пока z-index .modal-blacktop >= z-index .R-col
https://jsfiddle.net/ycyym828/

Проблема из-за того, что браузеры заменяют пробелом перенос строки между inline-block элементами.
Вот статья к которой разбираются способы их устранения https://htmlacademy.ru/blog/21-fighting-the-space-...

Ваш код поправленный одним из способов https://codepen.io/rockoff/pen/jYzKLb

Вы неправильно используете  bootstrap. Посмотрите как делается в официальной документации.
Для адаптивной верстки используйте flex или float.

Это не scale странно работает, а вы transform переопределяете.
было:
transform: rotate(90deg);
после :hover стало:
transform: scale(1, 2);

чтобы rotate сохранить надо так переопределять:
transform: rotate(90deg) scale(1, 2);

Посмотрите как это реализовано в правильных инструментах.

1. В таблице должна быть возможность выделить ячейки.
2. По клику на кнопку объединить, удаляете выделенные, заменяя одной большой. Можно даже контент сохранить.
А так как вы хотите реализовать, во-первых неудобно пользователю, во-вторых усложняет реализацию.

Примерно так https://jsfiddle.net/rockon404/9amjs0xr/

Можно https://jsfiddle.net/rockon404/b3rfa00m/
Но не с dropbox. Если интересно почему, перейдите по своей ссылке и посмотрите исходный код. Они под каждый переход новую ссылку на просмотр генерируют.

Посмотрите как это сделано у меня тут https://jsfiddle.net/rockon404/wgry1rv1/
Вам надо получить высоту внутреннего блока и использовать ее, а не auto.
Тогда анимация будет плавной.
Вместо animate можно использовать transition и просто писать высоту в стили.

Вы наверное слайдер делаете. Можно так https://jsfiddle.net/rockon404/qw6ty8rs/

Добавьте дочернему элементу display: inline-block;

либо уберите у родительского text-align: center; и добавьте дочернему margin: 0 auto;

Так: https://jsfiddle.net/rockon404/wgry1rv1/

Простейший вариант https://jsfiddle.net/hk6wscLt/

Для обычных цветов, принято использовать HEX значения:
color: #607D8B;

Для цветов с прозрачностью принято использовать RGBA:
color: rgba(0, 0, 0, 0.5);

Для полностью прозрачного принято использовать переменную transparent:
color: transparent;

Остальные html переменные цветов использовать можно, но зачем? В большинстве случаев HEX запись короче. Да и дизайнеры редко используют стандартные цвета.

Программы пипетки:
для Windows Just Color Picker или один из кучи аналогов,
для Linux GPick или один из аналогов,
на MacOS пока была без надобности, гуглите.