RAX7

<form method="get" action="servis">
  <select name="utm_brand">
    <option disabled selected>Бранд</option>
    <option value="919" data-brand="919">Бранд_1</option>
    <option value="920" data-brand="920">Бранд_2</option>            
    <option value="922" data-brand="922">Бранд_3</option>     
  </select>
  <select name="utm_city">
    <option disabled selected>Ваш город</option>
    <option value="1201" data-city="1201">Абакан</option>                  
    <option value="1214" data-city="1214">Аксай</option>
    <option value="1210" data-city="1210">Альметьевск</option>      
    <option value="1206" data-city="1206">Артём</option>
  </select>
  <button type="submit">Подобрать</button>
</form>

// layout.pug
html
  head
    block title
      title Layout Default Title
  body
    block content

// index.pug

extends layout.pug

block title
  title Index page

block content
  p Lorem ipsum dolor sit amet.

Либо в сам шаблонизатор прокидывать переменную в процессе сборки, как показано в офф. документации https://pugjs.org/language/inheritance.html

.reviews__wrapper {
    padding: 0 0 40px 5vw;
}
.reviews__inner {
    padding-bottom: 40px;
}

css transition не поддерживает анимацию градиентов.
На js это можно реализовать с помощью requestAnimationFrame

const lerp = (a, b, t) => a * (1 - t) + b * t;

// from: https://easings.net
const easeOutQuad = (x) => 1 - (1 - x) * (1 - x);

function tween(from, to, duration, onUpdate, easeFn) {
  let rafId = null;
  let begin;

  const loop = (now) => {
    begin ??= now;
    const progress = Math.min(1, (now - begin) / duration);
    const ease = easeFn ? easeFn(progress) : progress;
    const val = lerp(from, to, ease);

    onUpdate(val);

    if (progress === 1) {
      rafId = null;
      return;
    }

    rafId = requestAnimationFrame(loop);
  };

  rafId = requestAnimationFrame(loop);

  return () => rafId ?? cancelAnimationFrame(rafId);
}

const progressBar = document.querySelector(".progressbar");
const progressBarValue = document.querySelector(".progressbar__value");

const progressBarStartValue = 0;
const progressBarEndValue = 100;
const progressBarStep = 10;
const animationDuration = 1000;

let progressBarCurrentValue = progressBarStartValue;
let killTween = null;

function onUpdate(val) {
  progressBarValue.textContent = `${val.toFixed(1)}%`;
  progressBar.style.background = `conic-gradient(#FFF ${val * 3.6}deg, #262623 ${val * 3.6}deg)`;

  if (val === progressBarEndValue) {
    alert("you have completed all the tasks");
  }
}

document.body.addEventListener("click", (e) => {
  if (progressBarCurrentValue === progressBarEndValue) {
    alert("you have completed all the tasks");
  } else {
    const fromValue = progressBarCurrentValue;

    progressBarCurrentValue = Math.min(
      progressBarEndValue,
      progressBarCurrentValue + progressBarStep
    );

    killTween?.();
    killTween = tween(
      fromValue,
      progressBarCurrentValue,
      animationDuration,
      onUpdate,
      easeOutQuad
    );
  }
});

Ширину/высоту менять в css (строки 71-72), вендорные префиксы были удалены за ненадобностью и чтобы не замусоривали код.

border-image

Если количество дочерних элементов сетки всегда известно, то можно построить такую ломаную сетку на гридах, добавив в неё вспомогательные колонки/строки и прописав каждому элементу его расположение в сетке.

.grid {
    display: grid;
    gap: 15px;
    grid-template-columns: 475px 180px 475px;
    justify-content: center;
}
 
.grid__item {
    background-color: #000;
    height: 320px;
}

.grid__item:nth-child(odd) {
  grid-column-end: span 2;
}

.grid__item:nth-last-child(-n + 2) {
  grid-column: 1 / span 1;
}

.grid__item:nth-last-child(-n + 1) {
  grid-column: 2 / span 2;
}

index.html
- <link rel="stylesheet" href="/color.css">
+ <link rel="stylesheet" href="/resume/color.css">

.accordion__wrapper.active .accordion__button::after {
    transform: translateY(-50%) rotate(180deg);
}