заливка одинаковая у всех сердец? если да, то описание градиента выносится в отдельный блок или оставляется только в первом svg, а остальные его спокойно используют
можно, data-атрибуты, это просто строка, если что-то перестаёт работать после добавления двоеточия, значит это что-то как-то интерпретирует получаемые значения, но к data-атрибутам это не имеет никакого отношения
это вопрос скорее не про флексы и гриды, а про картинки, которые если не указано обратного занимают свой изначальный размер в пикселях, поэтому обычным делом является что-то типа img { display: block; max-width: 100%; } в "ресете"