zveronol

:nth-child(7n)
Описывает элементы с номерами 7, 14, 21, и т. д.

Потому что нет соседнего с инпутом лейбла.
Они не лежат на одном уровне.
Поэтому, вам кажется, что это инпут не работает.

Переместите инпут или лейбл, так чтобы они стали соседними элементами.

Не скрывайте инпуты через display none, погуглите про доступное скрытие и паттерн visually-hidden.

Если Вас устроят css переменные. то можно при помощи них. ссылка

В вашей реализации нужно добавить еще border-radius, т.е.

.account__file {
  width: 230px;
  padding: 0 20px;
  padding-top: 75px;
  border: 2px dashed #8eb9f5;
  border-radius: 15px;
}

Лучше в css кажется не получится.
Другой вариант, можно заюзать svg. Т.е. подложить например под текст скругленный прямоугольник обведенный пунктиром.

<div class="account__file">
  <svg xmlns="http://www.w3.org/2000/svg" with="100%" height="100%" class="border">
    <rect x="0" y="0" rx="30" width="100%" height="100%" class="border-rect" />
  </svg>
  <input type="file" name="file" id="file" />
  <label for="file">
    <span class="account__subtitle">drag & drop</span>
    <div class="account__text">
      <p>Upload only png, jpg, jpeg</p>
    </div>
  </label>
</div>

классу .account__file прописать position: relative
css для svg:

.border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.border-rect {
  stroke: #8eb9f5;
  fill: #fff;
  stroke-width: 1;
  stroke-dasharray: 20;
}

Вот еще вариант с рамкой в качестве фона: https://z80b.github.io/qna.habr/

Так вы обращаетесь во внутрь .page-projects__details и ищите в нем .page-projects__elems, а надо рядом искать блок этот добавив "+"

Неправильный селектор

1. div внутри кнопки лишний
2. для скругленного треугольника используйте svg, не майтесь ерундой

slideGo нужно вынести за пределы $(document).ready(function() {

$(document).ready(function() {

let slider = $('.gallery__wrap');

slider.slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      dots: false,
      centerMode: true,
     centerPadding: '500px',
      arrows: true,
        appendArrows: $('.gallery__arrows'),
        prevArrow: '<button class="gallery__arrow gallery__arrow--dir_left"></div>',
        nextArrow: '<button class="gallery__arrow gallery__arrow--dir_right"></button>',
     dots: true,
     appendDots: $('.gallery__dots'),
      customPaging : function(slider, i) {
       return '0' + (i + 1);
       },
     dotsClass: 'gallery__dots-list',
     responsive: [

        {
          breakpoint: 1430,
          settings: {
            centerPadding: '200px',
          }
        },
        {
          breakpoint: 960,
          settings: {
            centerPadding: '100px',
          }
        },
        {
          breakpoint: 780,
          settings: {
            centerPadding: '0px',
            centerMode: false,
          }
        }
      ]
    });




});

function slideGo(dir) {
  let slider = $('.gallery__wrap');
  if(dir === "+") {
    slider.slick('slickNext');
  } else if ( dir === "-" ) {
   slider.slick('slickPrev');
  }
 }

background: rgb(250,250,255);
background: linear-gradient(180deg, rgba(250,250,255,1) 0%, rgba(255,255,255,0) 47%, rgba(255,255,255,1) 100%);

Можно и через абсолют примерно как здесь https://codepen.io/RAX7/pen/PoZMpqV
А можно и на js высчитывать позиции блоков и сдвигать их маржином.

Неровности по краям картинки можно сделать svg маской.

Добавь где нибудь <div class="container customPagination"></div> и у карусели опцию navContainer: '.customPagination'
Потом ровняй уже

задать clip не фону а элементу

.flex > flex-grow: 1;

Либо убрать centerMode или поставить ему false

Либо добавить centerPadding: '0px',

$('.main-header__form, .main-header__search').children().removeClass('main-header__form--active');

Так хотите?

:nth-child(n + 3)

https://jsbin.com/vukilogaye/edit