スマホ表示時に左揃えと中央揃えを切り替えたい

実現したいこと

htmlとscssで添付画像のようなレイアウトを組みたいのですが、メディアクエリの最小幅375pxと最大幅である899pxとでデザインの差が出てしまうので、なるべく差がでないようにコーディングしたいです。

発生している問題・分からないこと

デバイス幅375px～899pxで確認したとき、理想としてはh2タグ内の要素は中央配置、.point内ポイントイメージの画像は左揃え、.icon-wrapのアイコンはポイントイメージから右に30pxずらして配置し、最後に.about-textを疑似要素とコンテンツともに中央配置にしたいのですが、すべて中央に配置されてしまいます。
@media screen and (max-width: 900px)内.pointにかかっているmargin: 0 auto;を解除すれば解決するかと思ったのですが、それだと.about-textも左に寄ってしまいました。

※文章ですと伝わりづらいかと思いますので、画像を添付します。

該当のソースコード

html
1<body>
2	<div class="container">
3		<div class="content-wrap">
4			<section class="about">
5				<h2>
6					<span class="logo-img">
7						<img src="" alt="ロゴ画像">
8						テキスト
9					</span>
10					<span class="emphasis">強調文</span><br>
11					キャッチコピー
12				</h2>
13				<div class="point">
14					<figure>
15						<img src="" alt="ポイントイメージ">
16					</figure>
17					<div class="icon-wrap">
18						<figure>
19							<img src="" alt="アイコン">
20						</figure>
21						<span>アイコン内テキスト</span>
22					</div>
23					<div class="about-text">
24						<p>
25							テキストがここに入ります。テキストがここに入ります。テキストがここに入ります。テキストがここに入ります。<br>
26							テキストがここに入ります。テキストがここに入ります。テキストがここに入ります。テキストがここに入ります。
27						</p>
28					</div>
29				</div>
30			</section>
31		</div>
32	</div>
33</body>

scss
1img{
2	width: 100%;
3	height: auto;
4}
5
6container{
7	position: relative;
8	width: 100%;
9	max-width: 1920px;
10	margin: 0 auto;
11	padding: 0 20px;
12	
13	.content-wrap{
14		position: relative;
15		
16		.about{
17			width: 100%;
18			max-width: 1100px;
19			
20			h2{
21				display: flex;
22				flex-wrap: wrap;
23				justify-content: center;
24				margin-bottom: 50px;
25				font-size: 46px;
26				
27				.logo-img{
28					display: flex;
29					flex-wrap: nowrap;
30					align-items: baseline;
31					font-size: 60px;
32					line-height: 1.5;
33					margin-bottom: 40px;
34				}
35				
36				.emphasis{
37					display: contents;
38					color: #2785ff;
39				}
40			}
41			
42			.point{
43				position: relative;
44				
45				> figure{
46					position: relative;
47					max-width: 850px;
48					
49					&:after{
50						content: '';
51						display: block;
52						position: absolute;
53						bottom: -15px;
54						right: -120px;
55						width: 185px;
56						height: 475px;
57						background: url() no-repeat center center / cover;
58					}
59				}
60				
61				.icon-wrap{
62					display: flex;
63					flex-wrap: nowrap;
64					justify-content: start;
65					align-items: center;
66					flex-direction: column;
67					position: absolute;
68					top: -55px;
69					right: -35px
70					width: 275px;
71					height: 275px;
72					background: #2785ff;
73					border: 2px solid #F0F0F0;
74					border-radius: 50%;
75					z-inde: -1;
76					
77					figure{
78						display: block;
79						width: 30px;
80						margin: 20px 0 15px 0;
81					}
82					
83					span{
84						color: #FFF;
85						font-size: 25px;
86					}
87				}
88				
89				.about-text{
90					display: flex;
91					flex-wrap: nowrap;
92					justify-content: center;
93					align-items: center;
94					background: #ffe847;
95					height: 350px;
96					border-radius: 220px;
97					
98					p{
99						font-size: 28px;
100					}
101				}
102			}
103		}
104	}
105}
106
107@media screen and (max-width: 900px){
108	.container{
109		.content-wrap{
110			.about{
111				h2{
112					flex-direction: column;
113					align-items: center;
114					margin-bottom: 50px;
115					
116					.logo-img{
117						margin-bottom: 25px;
118						font-size: 30px;
119					}
120				}
121				
122				.point{
123					max-width: 600px;
124					margin: 0 auto;
125					
126					> figure{
127						max-width: 600px;
128						
129						&:after{
130							width: 55px;
131							height: 135px;
132							botom: 0;
133							right: -35px;
134						}
135					}
136					
137					.icon-wrap{
138						width: 120px;
139						height: 120px;
140						top: -40px;
141						right: -30px;
142						
143						figure{
144							margin: 10px auto 5px;
145							width: 20px;
146							text-align: center;
147							
148							img{
149								width: 20px;
150							}
151						}
152						
153						span{
154							font-size: 15px;
155						}
156					}
157					
158					.about-text{
159						position: relative;
160						height: 260px;
161						margin-top: -20px;
162						
163						&:before{
164							content: '';
165							position: absolute;
166							top: 0;
167							left: 50%;
168							display: block;
169							width: calc(100vw + 13.7%);
170							max-width: 600px;
171							height: 100%;
172							margin: 0;
173							background: #ffe847;
174							border-radius: 177px;
175							transform: translate(-50%, 0);
176							left: 50%;
177							z-index: -1;
178						}
179						
180						p{
181							font-size: 16px;
182						}
183					}
184				}
185			}
186		}
187	}
188}