Как зафиксировать блок с позиционированием от родительского контейнера?

Не очень понятна формулировка.
Если должен двигаться в пределах родителя, то sticky, если зафиксирован в родителе, то absolute.

Но может быть, вам нужно что-то ещё. Например, всё таки fixed, но с координатами на js.
Хорошо бы картинку или пример на codepen.io с имеющимся кодом.

Как сделать эффект закруглений как на фото?

Максим, если есть закономерность, то получится. Тут она есть,по крайней мере по предоставленному скрину.
И обычный грид, без masonry.

Как сделать эффект закруглений как на фото?

Максим, автоматизировать? Я все стили пишу руками. Вы имеете в виду придумать миксин? Это получится.

Как сделать анимированное закрытие модального окна bootstrap?

Оно и в оригинале анимированное.
Поэтому нужна конкретика.

Как сделать эффект закруглений как на фото?

Знает кто как можно сделать закругления как на фото?

Раньше реже, а сейчас это еженедельный вопрос.

https://jsfiddle.net/Ankhena/xjpefyq0/
https://codepen.io/AnnaSummer/pen/gOQVxBR
https://jsfiddle.net/Ankhena/wkdfngyu/
https://jsfiddle.net/Ankhena/1hu9ot0q/1/

и т.д.

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

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.