Скажу банальную вещь: сайт должен хорошо выглядеть на любой ширине вьюпорта.
Поэтому, использовать те брейкпоинты, которые лучше всего для этого подходят.
А ещё, можно весь сайт сделать в vw и clamp, тогда вообще можно обойтись без media.
Так что ваш вопрос без конкретики не имеет смысла.
сделать два разных аккордиона под телефон и мобилку и скрывать их по условию ширины?
или можно сделать один аккордион и перестраивать блоки? если да, то как лучше это реализовать?
Один, конечно.
grid и display:contents (при необходимости) вам в помощь.
Шепотом: Паша рановато стал считать себя дизайнером. Может быть предложить Паше ещё подумать над дизайном? И заодно спросить как он это видит на вьюпортах разной ширины.
Как верстать? Ну как хотите: гриды, абсолюты, хоть отрицательные margin.
Тут нужно конкретизировать вопрос, что именно делаете и что не получается.
https://codepen.io/noahblon/post/coloring-svgs-in-...