Сергей delphinpro

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.element {
  width: 20%;
  text-align: center;
}

Высоту активного слайда нужно взять дефолтной.
Остальные слайды трансформировать transform: scale()

Я не помню точно, какие там классы у слайдов, но примерно будут такие стили:

.slick-slide {
  transform: scale(0.8);
  transition: transform 0.8s ease;
}
.slick-active {
  transform: scale(1);
}
.slick-active + .slick-slide {
  transform: scale(0.9);
}
.slick-active + .slick-slide ~ .slick-slide {
  transform: scale(0.7);
}

Нет, это не нормально.
Достаточно одной формы ответа.

@foreach($reviews as $review)
<li>
    <h6 class="comment-name">{{ $review->user->name }}</h6>
    <div class="content">
    <p>{{ $review->content }}</p>
    <div class="comment-content-right">
      <a href="#" onclick="openReplyModal({{ $review->id }})">Ответить</a>
    </div>
    </div>
</li>
@endforeach

<div id="modal-reply">
  <form>
    <input type="hidden" name="review_id" id="review-id-field">
    <div class="modal-body">
      <textarea name="content"></textarea>
    </div>
  </form>
</div>

function openReplyModal(reviewId) {
  document.getElementById('review-id-field').value = reviewId;
  
  // Bootstrap 4
  $('#modal-reply').modal('show');

  // Bootstrap 5
  const modal = new bootstrap.Modal(document.getElementById('modal-reply'), {});
  modal.show();
}

1. Средствами web-сервера перенаправляйте все запросы внутри subsite на /subsite.
2. Средствами javascript читайте location.hash и показывайте нужное.
Если будете использовать фреймворк, типа vue/react, то у них уже есть встроенный роутер по хешу (не отменяет первого пункта).

Не понятно, причем здесь флекс и БЭМ
Обычные азы

<div class="header__phone">
   <a href="tel:+74999228974">
      +74999228974
   </a>
   <button class="button">заказать звонок</button>
</div>

Два строковых элемента всегда будут расположены в строку
Хотите вертикально - нужно это переопределить. Например, ссылку обернуть в блочный элемент (div) или стилями задать display:block ссылке и/или кнопке.
Ну или для .header__phone указывать флекс и вертикальное направление.

В разметке сначала должен располагаться инпут

<input type=checkbox>
<label>Checkbox</label>

input[type=checkbox]:checked + label {
}

gulp.watch('./dist/scss/*.scss'
Вы следите только за корневыми файлами. Если у вас есть поддиректории, то изменения в них не отслеживаются.

/dist
  /scss
    main.scss - отслеживается
    /blocks
      header.scss - не отслеживается

Вот так будет работать для всех файлов:

gulp.watch('./dist/scss/**/*.scss', gulp.series('sass'));

Просто задать ширину блока со слайдером

<div class="section">
  <div class="container">
    <div class="slider">
      
    </div>
  </div>
</div>

.section {
  overflow: hidden;
}
.container {
  width: 1000px;
  margin: auto;
  padding: 10px 0;
  background: green;
}
.slider {
  height: 100px;
  background:red;
  width: calc(50% + 50vw);
}

В простейшем случае попилили всё на ячейки и сделали на гридах.



Остальное зависит от дополнительных условий.

У вас нет градиента. А это сильно упрощает задачу.
<div class="div">75</div>

.div {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 30px;
}
.div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 20px solid red;
  border-color: red red green green;
  border-radius: 100%;
  transform: rotate(45deg);
  pointer-events: none;
}