При верстке mobile-first ставятся мобильные размеры картинки.
При desktop-first, соответственно.
В рекомендациях гугла видела фразу о том, что достаточно просто правильных пропорций в атрибутах.
Потом переопределяются стилями.
Также атрибуты width и height задаются тегам source при использовании picture.
Если захотите сделать какой-то элемент внутри строки (параграфа), выделить текст, сделать иконку - то еще один строковый элемент не лучшая идея.
Во-первых, по умолчанию, p это блок, а не строка.
Во-вторых, что во что можно вкладывать определяется не блочностью, а категорией контента.
В-третьих, то, что вы нарисовали определяется свойством display, а не просто самим тегом.
Хочу добавить, что смысл слова "параграф" с жизни и в верстке отличается и имеет более расширенное применение.
В жизни это просто блок текста из одного или нескольких предложений.
А в верстке может также служить и для группировки фразового контента. Например, лейбла и инпута.
masha096, ну, во-первых, через nth-child не выйдет. Выйдет через соседние селекторы.
Во-вторых, не выйдет всё равно, потому что уберется и во время движения.
Отсюда вывод: рисуйте границу слайдера не бордером, а чем-нибудь другим. Например, псевдоэлементом.
rifat2125, еще раз: любой. Twig, nunjucks, pug, handlebars, lodash...
Я бы в этот момент перешла на CMS. Особенно если натяжкой занимаетесь вы сами, как это написано в вопросе.
