Станислав Зиненко

Просто посоветую хороший YouTube канал и онлайн-школу. Периодически смотрю их. Много полезного можно почерпнуть для цифрового рисования

Один из способов - добавить тег label и его спозиционировать.

Я бы лучше обернул input в div или label и дал бы ему псевдоэлемент, который также можно спозиционировать и стилизовать. А содержимое псевдоэлемента можно задать через атрибут родителя, тогда можно с помощью JS его динамически менять, если понадобится.
https://codepen.io/stanislaff/pen/YzBbwGP
Есть еще вот такой вариант, если подходит

Никогда такого не пробовал. Но, кстати, тоже видя в макетах задавался вопросом. Сейчас попробовал поэкспериментировать.
Получилось, на мой взгляд, достаточно костыльно. Работает, если фон белый, ну или однородный (в цвет).
Зато при изменении ширины экрана вроде всё остается на своих местах.
CodePen

Zeplin использовал в свое время

Потому-что JS-ом жестко выставляешь display: none для nav, а он прописывается инлайн как свойство в сам HTML и медиазапрос не срабатывает.

Но если дописать после первого media :

@media all and (min-width: 500px) {
	nav {
		display: grid !important;		
	}
}

то вроде работает.
В первом только нужно поправить (display: none - написать)

nav {
		display: none;
		grid-template-columns: 1fr;
		grid-gap: 40px;
		padding: 20px 0 20px 0;
		font-size: 20px;
	}

Но ощущение такое, что это костыль.

Так же, при установке не срабатывает:

body {
      overflow-x: hidden;
}

Но при установке совместно с html - неожиданно сработало

html, body {
      overflow-x: hidden;
}

Вот наконец-то подборочка https://cssauthor.com/css-flexbox/

Adobe MUSE)