Ответа сразу и на всё дать не смогу, ибо устал за день.

Как иконки, так и большие изображения из .psd достаются элементарно - инструментом на V (выделение он, наверное, называется) жмакаешь по картинке / иконке (при этом нужно, чтоб была галочка на "Auto-Select") и в "Слоях" (справа обычно расположены) тебе подсветит на конкретный элемент макета.

Не теряя времени переименовываешь его, и, если совсем не терпишь, то жмёшь на этот же элемент ПКМ и выбираешь "Quick Export as PNG";

Но есть вариант для самых терпеливых - это сначала найти и переименовать ВСЕ assets (в соответствии с твоим планом на вёрстку -- sect-03-item-01-img-02, например) и потом одним действием сгенерировать набор этих изображений...

Как "научиться правильно верстать с макета" - поможет только многочисленная утомительная практика.

для того, чтоб img растягивалась добавить ей object-fit: cover;;

в gallery, кажется, раз уж ты задаёшь grid-template-columns, то и -auto- правило тоже следует писать для columns


.gallery {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-columns:200px;
}
после уже разбирайся с rows, должно стать проще