Почему эффект применяется только к одной кнопке из трёх?

Deita, а не, тут по любому не хватит тени.
Ждать, когда починят )))

Почему эффект применяется только к одной кнопке из трёх?

Deita, можно тенью

Почему эффект применяется только к одной кнопке из трёх?

Keany, и еще немножко поправим стили и разметку
https://codepen.io/AnnaSummer/pen/MWRBwbG

Либо второй спан нужно скрывать от скринридеров.

Почему в VS code JS файл не подключается к HTML файлу?

VS Code тут не при чем. Это редактор кода.

У вас нет подключения jquery и вы пытаетесь выполнить js когда еще нет разметки.

https://learn.javascript.ru/loading

Для проверки валидности разметки https://validator.w3.org/nu/
Потому что у вас там много ошибок.

И я бы рекомендовала отложить js и вернуться на шаг назад, к основам разметки.

Как сделать так, чтобы модалка была не под обрез внизу при прокрутке, а чуть выступала на 10px?

Удобно позиционировать центральную часть гридами (3х3), а не абсолютом. Ну или флексом.

Почему картинка вставленная через picture растягивается на неопределенную ширину в firefox?

Вячеслав Яшников, про голубой артефакт это вообще не про ваш код

Почему картинка вставленная через picture растягивается на неопределенную ширину в firefox?

smilingcheater, https://squoosh.app/

Почему картинка вставленная через picture растягивается на неопределенную ширину в firefox?

smilingcheater, avif?

Как сделать такую верстку на гридах?

Видимо, забыли указать, что МИКРОСКОП должен занять 2 ряда. И ТОМОГРАФ тоже.

grid-row: span2
Высоту строкам лучше вообще не задавайте, иначе при переполнении всё улетит.

Как сделать блок на всю высоту?

100vh тоже

По какой причине?

Есть еще dvh, svh, ldvh

Почему картинка вставленная через picture растягивается на неопределенную ширину в firefox?

Вячеслав Яшников, для пропорций, видимо, придется написать js и передавать через кастомное.

Почему картинка вставленная через picture растягивается на неопределенную ширину в firefox?

Вячеслав Яшников,

в псевдоэлемент убрать ее не получится поскольку нужна поддержка webp

Во-первых, есть image-set
Во-вторых, есть скрипт определяющий поддержку webp.
Так что это вообще не аргумент.

Ещё у вас картинка по виду векторная. Может она будет svg?

Ещё можно попробовать заменить абсолют на гриды. А абсолютить уже картинку, если по первому варианту.
И картинке тогда задавать aria-hidden.

Как изменить цвет у сложных спрайтовых иконок в отдельном файле?

Genri_Rus, давайте так: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
А дальше сами. Ну либо уже с конкретикой, как вы всё это пытались применить.

Как изменить цвет у сложных спрайтовых иконок в отдельном файле?

Genri_Rus, ну вы как, можете закрасить кружочек градиентом на css?

Как изменить цвет у сложных спрайтовых иконок в отдельном файле?

Genri_Rus, пока, всё что есть на текущий момент в примере рисуется на css.

Как изменить цвет у сложных спрайтовых иконок в отдельном файле?

Genri_Rus, если реальный пример это круг и лого, то зачем делать круг в svg? Если это обычный border-radius, а цвет иконки меняйте масками.

Как изменить цвет у сложных спрайтовых иконок в отдельном файле?

Genri_Rus, если реальный пример это всё таки не круг с лого, то инлайнить.

p.s. символьные спрайты устарели, можно использовать стеки, которые работают не только в use.
https://telegra.ph/Stack--sprajt-zdorovogo-chelove...
Но это не к вашей проблеме.

Как изменить цвет у сложных спрайтовых иконок в отдельном файле?

Либо через currentColor либо стереть fill в исходнике, задать класс и задавать классу fill в стилях.

Как сделать сложную несимметричную grid-сетку?

kpa18, padding, margin, width, grid, flex и наверное, ещё миллион способов. В некоторых с участием calc.

Я бы порекомендовала пройти что-нибудь типа тренажеров HTML Academy для освоения базовых навыков.
Хотя бы размеры, отступы, позиционирование, выравнивание, флексы, гриды. Дальше смотреть по потребностям.
Как альтернатива почитать на Доке https://doka.guide/css/

Какой актуальный стек верстки 2024?

State of CSS
Посмотрите и вопросы и результаты.