Иван В

Оберните оранжевые боксы в дополнительный div

<div class="section">
   <div class="p"></div>
   <div class="new-div">
      <div class="orange"></div>
      <div class="orange"></div>
   </div>
</div>

Этой обертке дайте свойства

.new-div {
   display: flex;
   justify-content: space-between;
}

Плавного перехода не будет.
Потому что у вас для ".news__image:after" прописано свойство "transition: 0.3s opacity, 0.3s visibility, 0.3s background-color;".
Для visibility не работает transition. Т.е. даже с transition элемент не станет анимирован, всегда будет резко появляться \ исчезать. Здесь список свойств для которых работает анимация.
Убирайте свойство visibility, делайте исчезновение \ появление элемента через opacity и тогда все будет ок.

Предлагаю третий вариант:

<section class="works">
    <div class="..."> <!-- здесь объедините свойства "wrap text-center" и "works__desc" -->
         <h2 class="works__title">Реализованные проекты</h2>
         <p>Коммуникационное агентство – часть многофункционального холдинга, объединяющего различные компании на территории России и ближнего зарубежья.</p>
         <p>Наши подходы к организации бизнеса и имеющиеся ресурсы позволяют одинаково эффективно обеспечивать реализацию как крупномасштабных федеральных или международных проектов, так и решать небольшие локальные задачи. Мы находимся в постоянном развитии, расширяя и укрепляя имеющиеся бизнес-направления, а также формируя новые.</p>
    </div>
</section>

В вашем втором варианте явно лишне делать два div'а "обертки" для текста.
Группировать текст нужно, например, если вы хотите этот текст каким-либо образом позиционировать или, например, ограничить длинну. "Оборачивать" в div ради самого оборачивания не имеет смысла.

Задайте .work1 ширину и высоту.

Чтобы "наложить слои друг на друга", вместо transform: translate() воспользуйтесь абсолютным позиционированием (position: absolute). Тогда не будет проблемы с белой областью.

Решение есть
Можно заменить размеры шрифтов и элементов. Вместо фиксированных (в пикселях) на относительные (в "vw").

Теория
Например, при разрешении 1920px шрифт размером 12px будет соответствовать размеру 0.63vw (это можно вычислить самому или в онлайн сервисе или в отладчике браузера). При изменении размера экрана, размер шрифта будет пропорционально изменяться. Если размеры остальных элементов изменить на "vw", то можно сделать чтобы всегда было "как в макете" при любом разрешении экрана.

Практика
Как делаю я на примере SASS:
1. Если макетов два (мобильная версия с базовой шириной 320px и десктоп версия с базовой шириной, например, 1920px) я делаю два миксина с брейкпоинтами:

=largeScreen
  @media only screen and (min-width: "1919px")
    @content

=mobileScreen
  @media only screen and (max-width: "767px")
    @content

2. Рассчитываем размеры элементов.
Будем сходить из того, что у верстки будет три состояния:

• размер менее 768px
  
• более 768px но менее 1920px
  
• более 1920px
  

Чтобы для каждого размера экрана вычислить соответствующий vw элемента, прописываем в SASS такие функции:

@function large($target)
  $vw-context: (1920/1920)
  @return ($target * $vw-context) * 1px

@function base($target)
  $vw-context: (1920 * .01)
  @return ($target/$vw-context) * 1vw

@function mobile($target)
  $vw-context: (320 * .01)
  @return ($target/$vw-context) * 1vw

Что тут вообще происходит? ))

Разберем функцию "base":

@function base($target) // пиксельный размер элемента, которое мы передаем в функцию
  $vw-context: (1920 * .01) // "1920" базовый размер макета десктопной версии, умножаем на "0.01" чтобы получить соотношение 1% экрана(=1vw) к пикселям макета.
  @return ($target/$vw-context) * 1vw // возвращаем соотношение размер элемента в "vw"

Аналогично работают остальные функции, за исключением large.
В ней мы возращаем размеры в пикселях. Т.е. используем "классический" способ, когда есть фиксированная контентая часть - все что внутри нее с фиксированными размерами, а вне растягивется по ширине экрана.
В моем примере функции large базовый размер экрана и максимальный совпадают, но вам ничего не маешает задать максимальный размер, например, в 2560px. (тогда в функции вторая строка будет иметь виж $vw-context: (2560/1920) )

3. Прописываем все это в стилях элемента
Например (SASS синтаксис):

.title 
 font-size: base(12)
 +largeScreen
     font-size: large(12)
 +mobileScreen
     font-size: mobile(12)

В CSS мы получим элемент с относительным размером. В трех разных диапозонах.

ВАЖНО! Такой способ подходит, когда нужно просто сделать гибкий лэндинг и у заказчика нет строгого стайл гайда, когда все размеры элементов четко прописаны в документе.