Скажу банальную вещь: сайт должен хорошо выглядеть на любой ширине вьюпорта.
Поэтому, использовать те брейкпоинты, которые лучше всего для этого подходят.
А ещё, можно весь сайт сделать в vw и clamp, тогда вообще можно обойтись без media.
Так что ваш вопрос без конкретики не имеет смысла.
сделать два разных аккордиона под телефон и мобилку и скрывать их по условию ширины?
или можно сделать один аккордион и перестраивать блоки? если да, то как лучше это реализовать?
Один, конечно.
grid и display:contents (при необходимости) вам в помощь.
Шепотом: Паша рановато стал считать себя дизайнером. Может быть предложить Паше ещё подумать над дизайном? И заодно спросить как он это видит на вьюпортах разной ширины.
Как верстать? Ну как хотите: гриды, абсолюты, хоть отрицательные margin.
Тут нужно конкретизировать вопрос, что именно делаете и что не получается.
1. Это не тег
2. Он работает правильно, именно так, как и задумано. Фиксируется относительно вьюпорта в том месте, куда указывают координаты.
Начать, наверное, нужно с самого начала: зачем вам фиксированное позиционирование для .page? Чего вы хотели добиться?
Может это было sticky для хедера?
