Смотря как у вас эти диаграммы расположены, если они все рядом и на одном уровне, то можете взять просто одну первую диаграмму для вычисления смещения, либо использовать вместо id класс. А если условие принято, то инициализировать в условии не одну, а все диаграммы.
Tutucu: не делается когда картинка это какая-то часть стать или что-то что меняется динамически, если вы верстаете какой-то landing page, который меняться с помощью CMS не будет, то вполне можно использовать background-size.
Потому что далее когда Ваш макет будут будут натягивать на какую-либо CMS, то переменные содержащие изображения будут вставлять в HTML код, в общем иными словами HTML код меняется динамически, CSS редко кто динамически меняет.
На сколько я знаю ему по сути нужна функция аналогична функции в css: background-size: cover; Как с помощью флекс можно расположить так картинку, чтобы она поместился в блок полностью меньшей стороной, а на большей лишнее обрезалось?
Не знаю почему, лень разбираться в их коде и вам не советую, думаю просто в этом примере либо предусмотрено только для webkit, иными словами либо им было лень либо просто плохо сверстали) если вам нужно то думаю вы сверстаете правильно и кроссбраузерно, все современные браузеры поддерживают анимации.
Сверстайте такие линии или возьмите картинку, как вам нужно, добавьте к этой картинке класс, к классу пропишите такую же анимацию как в моем примере, только вместо box-shadow, пропишите opacity от 0 до 1.
Я понимаю что нужно указывать для каждого, но в данный момент мне нужно только для SM, для MD и LG укажу позже. Если сейчас укажу то все равно влияния никакого не будет.
Не для спящего режима, а для режима гибернации. Когда компьютер переходит в спящий режим то оперативная память не освобождается и не стирается, на нее продолжает подаваться напряжение для сохранения памяти. Он также отключается с командной строки вроде так powercfg.exe /hibernate off, команда может отличаться для разных ос.