Ankhena

.text {
    width: min-content;
    min-width: 100%;
    box-sizing: border-box;
}

или так

.text {
    width: min-content;
    min-width: fit-content;
    box-sizing: border-box;
}

из вопроса не понятно как должен себя вести блок при недополнении.

Перевожу на русский: в кнопке должен быть текст. Доступный для всех технологий, в том числе для скринридеров.
Если визуально в кнопке его нет, то используется доступно скрытый текст. Гуглите паттерн visually-hidden.
Ну или хотя бы атрибут aria-label.

Не работает, потому что вы в backgroung-image кроме картинки понаписали ещё кучу всего.
Пишите либо всё в сокращенное свойство либо всё по отдельности. А не кашей, как сейчас.

При такой структуре разметки вам не нужен для этого JS.

Поменяйте id="info_block" на class="info_block" и добавьте css

.info_block {
  disply: none;
}
.open_link:hover + .info_block {
  disply: block
}

Правда, лучше немножечко видоизменить, чтобы наведение было на общего родителя.

Для .container задан flex. Значит, задавать для .block inline-block - бесполезно, потому что будет всё равно блок (если мы не будем сейчас думать о "на всякий случай").
Но уже внутри .block есть дочерний элемент .block-item тоже имеющий inline-block.
А после них браузер делает "пробел". И то, что вы видите красное - это он и есть.

Как лучше чинить зависит от макета, вашей схемы недостаточно. Ну разве что банальные советы поменять на флекс или обычный блок или разобраться с vertical-align.

Нужно провести вертикальные линии по скрину. И выяснить, что колонок должно быть 3, а не 2.

Zeplin

1. clip-path
2. убрать маску у картинки, наложить поверх и фона и канваса.

Почитайте про unicode-range, браузер сам разберется.
Краткая суть такая: если на странице нет символов из указанного диапазона, то шрифт не загружается. Если же есть хоть один символ, то загрузится весь шрифт.

https://developer.mozilla.org/en-US/docs/Web/CSS/@...

<h1 class="main-title">
      мои <span class="big-logo"><img class="graficlogo" src="assets/img/Logo.png" alt="Logo"></span><br>
      достижения
</h1>

А, поскольку, это скорее украшение строки, а нормальный логотип уже есть наверху слева, то нет смысла его дублировать как img и можно сократить до:

<h1 class="main-title">
     <span class="main-title__beautiful-string">мои </span>
      достижения
</h1>

.main-title__beautiful-string {
  display: block;
}

.main-title__beautiful-string::after {
  content: "";
  display: inline-block;
  vartical-align: middle;
  bg: иконка
}

Либо флексом.

Лень компилировать всё это в мозгу. На будущее, делайте песочницы с видимой проблемой на codepen.io.

Но вы же переопределили transform.
Пока scale(0) он по центру, потому что есть translate, а при scale(1) никакого translate уже нет.

Что имеет смысл сделать:
1. Большинство современных браузеров позволяет стилизовать радио и чекбоксы с помощью appearance, без вот этой дичи со спанами.
2. Если всё таки спан, то для серого фона нет смысла делать псевдо, можно покрасить сам span.
3. + лучше делать фоном (или маской), а не в content, будет легче управлять. Опять же, шрифт в content может сбивать центрирование, потому что так нарисован символ.
4. after не вешать абсолютом, а разместить в центр, например, флексом.
5. Либо вообще не делать after, а регулировать bg size (mask size) для появления крестика.

Итого: можно сократить огромный кусок мусора, избавиться от трансформаций и абсолюта.

Браузер не умеет работать с scss.
Ваш код сначала нужно скомпилировать в css.
Посмотрите в сторону Gulp (для верстки за глаза).

Также можно заменить препроцессорные переменные на кастомные свойства css. Но их работа различается.

но у svg в коде есть определенная ширина и из-за этого картинка становиться или в левый или в правый край

Ну не из-за этого, а из-за того, что по умолчанию, svg не меняет пропорции.
Но это меняется с помощью атрибута preserveAspectRatio

1. Плейсхолдер не должен быть пустым. Хотя бы неразрывный пробел  
2. Посмотрите на хотя бы в вопросе. Видите, кусок жирный? Исправьте.
3. Изучите селекторы
.username:focus ~ .for-username
Это значит: найди for-username, которые идут следом, на том же уровне, что и username и когда он в фокусе.
Таких элементов не существует, потому что в коде всюду сначала label, а потом input.
Т.е. либо использовать :focus-within либо менять разметку.

Просто тень
box-shadow: -10px 10px 0 0 violet;

Плейсхолдер забыли
Чтобы срабатывал :placeholder-shown (и в сочетании с :not) он должен быть.

https://codepen.io/AnnaSummer/pen/xxYygyK

Добавляйте что-нибудь типа font-variation-settings: 'wght' 1000, 'CONT' 1000