Ankhena

https://webref.ru/css/box-sizing поменяйте на border-box
либо border на outline или тень

Например, так https://jsfiddle.net/75oyngws/

p.s. обрывала бы ручки за такие селекторы и импотанты

.postisitonRelative{
left:10em;
top: 2em;
bottom: 20em;
position: absolute;
}

не считая опечаток

Есть такой паттерн .visually-hidden

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0)
}

И заодно для развития видяшка про доступное скрытие https://htmlacademy.ru/blog/video/shorts/short-12

Но это не поможет, если не загрузится только внешний шрифт. И тут совет про хранение его у себя как раз в тему.

.work__number вообще лишний
https://jsfiddle.net/0Lxewqj1/

Почему без позиционирования?
С позиционированием можно и от work__subtitle избавиться.

box-shadow: 0 0 0 99999px rgba(0,0,0,0.3); для блока с формой.

p.s. и не используйте id для стилизации.

1. Взять и сохранить из фотошопа.
2. Скриншотилкой, например, nimbus или joxi

Потому что вторая группа правил перебивает первую. Пишите в обратном порядке.

Сюрприз с котиком хорош.

Но вам тоже сюрприз: картинки для интернет магазина нужно готовить.
img тоже автоматом может обрезаться под квадрат, это не проблема. Проблема в другом, что так и голову можно отрезать, автоматом.

Например, так:

background: radial-gradient(white 20px, transparent 21px, transparent 40px, white 41px),linear-gradient(white, lightseagreen);

https://jsfiddle.net/Lxdjg1ok/

либо используя svg (разные варианты могут быть)

Родитель флекс, в нем 2 блока: боковой и основной. Боковому меняете ширину, у основного flex:1

https://jsfiddle.net/musg4qnh/

В связи с тем, что автор нашел скругления в своем макете, вариант с SVG:


Например, так
Для скруглений на CSS еще пошаманить с https://jsfiddle.net/xt1chyvn/
Либо псевдоэлементом с градиентом или бордером, если фон цветом (который голубой у вас), а не картинкой.

В общем случае так: https://jsfiddle.net/5rb3hdc6/

Например, флексами: https://jsfiddle.net/y9r85dot/
Можно пересчитать в проценты.
И не стоит задавать высоту, иначе при увеличении размера шрифта или количества текста все полетит.

Альтернатива: абсолюты. Только плясать нужно от центра, а не от краев.
Но тут понадобится js, чтобы узнать размеры родительского блока.

И как сделать так, чтобы при уменьшении экрана всё можно было скролить по вертикальной оси? overflow-x: scroll ничего хорошего не даст(

В media переставить все на обычные блоки. Или на флексы, если нужно менять порядок.

Потому что вы проверяете на пустое поле или нет. А в тот момент, когда дело доходит до скрипта эти поля никогда не пустые, потому что об этом позаботился браузер проверив required.

В демках все есть

Нужна задать всем owl-item кроме того, у которого есть класс .center прозрачность и трансформ.
Причем именно так, а не увеличивать текущий (хотя, конечно, зависит от исходного размера фоток).

.owl-item:not(.center) {
  opacity: 0.5;
  transform: scale(0.6, 0.6);
}