Done #2

src/App.css

@@ -18,6 +18,12 @@ body {
 img {
   vertical-align: top;
 }
+.img-wrap {
+  width: 100%;
+}
+.img-wrap img {
+  width: 100%;
+}
 .swiper-container {
   box-sizing: border-box;
   width: 100%;
@@ -33,19 +39,21 @@ img {
   position: relative;
   background: no-repeat center center / cover;
 }
-.swiper-slide.first p {
+.group {
+  position: relative;
+}
+.group p {
   position: absolute;
-  font-size: 25px;
+  font-size: 20px;
   color: #fff;
   line-height: 1.5;
-  top: 15px;
+  top: 20px;
   left: 0;
   right: 0;
   padding: 0 15px;
   box-sizing: border-box;
   text-align: center;
   text-shadow: 0px 0px 3px rgba(0, 0, 0, 1), 0px 0px 3px rgba(0, 0, 0, 1), 0px 0px 3px rgba(0, 0, 0, 1);
-
 }
 .content-wrap {
   display: flex;
@@ -80,6 +88,10 @@ img {
   html, body, #root {
     height: auto;
   }
+  .group p {
+    position: relative;
+    margin-top: 15px;
+  }
   .content-wrap {
     width: 100%;
     flex-direction: column;

src/App.js

@@ -19,14 +19,16 @@ function App() {
   return (
     <div className="swiper-container">
         <div className="swiper-wrapper">
-        <div
-          className="swiper-slide first"
-          style={{ backgroundImage: `url(${groupImg})`}}
-        >
-          <p>
-            여기까지 오게 된 것은 모두 켄님 덕분입니다. Special thanks to ken.<br />
-            2020.01.06 ~ 05.09 바닐라코딩 7기, 스승의 날
-          </p>
+        <div className="swiper-slide">
+          <div className="group">
+            <div className="img-wrap">
+              <img src={groupImg} alt="Bye Vanilla" />
+            </div>
+            <p>
+              여기까지 오게 된 것은 모두 켄님 덕분입니다. Special thanks to ken.<br />
+              2020.01.06 ~ 05.09 바닐라코딩 7기, 스승의 날
+            </p>
+          </div>
         </div>
           {
             letters.map(letter => {