#32 Edit html and css file

practice/practice-01/src/index.html

@@ -58,11 +58,11 @@
 
     <!-- Sponsor section -->
     <section class="sponsor">
-      <div class="sponsor__container">
-        <div class="sponsor__content">
-          <span class="sponsor__title">Partners</span>
-          <h2 class="sponsor__heading">Lorem Ipsum Dolor</h2>
-          <p class="sponsor__description">
+      <div class="sponsor__container align-center">
+        <div class="sponsor__content align-center">
+          <span class="sponsor__title line-height-125">Partners</span>
+          <h2 class="sponsor__heading line-height-125">Lorem Ipsum Dolor</h2>
+          <p class="sponsor__description line-height-125">
             Lorem ipsum, dolor sit amet consectetur adipisicing elit.
           </p>
         </div>

practice/practice-01/src/style/abstracts/variables.css

@@ -6,6 +6,7 @@
   --fs-sm: 15px;
   --fs-md: 20px;
   --fs-lg: 40px;
+  --width: 1180px;
   --ff-secondary-regular: CrimsonText-Regular;
   --ff-secondary-bold: CrimsonText-Bold;
   --ff-primary-medium: WorkSans-Medium;

practice/practice-01/src/style/main.css

@@ -130,44 +130,42 @@
 
 /* Pattern Section */
 .sponsor__container {
-  width: 100%;
-  max-width: var(--max-width);
+  width: var(--width);
   margin: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   gap: 55px;
   margin-bottom: 73px;
 }
 
-.sponsor__content {
+.align-center {
   display: flex;
   flex-direction: column;
   align-items: center;
+}
+
+.sponsor__content {
   gap: 16px;
-  max-width: 411px;
+  width: 411px;
 }
 
 .sponsor__title {
   font-family: var(--ff-primary-bold);
-  font-style: inherit;
-  line-height: 125%;
   letter-spacing: 5px;
   text-transform: uppercase;
   color: var(--primary-color);
 }
 
+.line-height-125 {
+  line-height: 125%;
+}
+
 .sponsor__heading {
   font-size: var(--fs-lg);
   font-family: var(--ff-secondary-bold);
-  font-style: normal;
-  line-height: 125%;
 }
 
 .sponsor__description {
   font-size: var(--fs-md);
   font-family: var(--ff-primary-regular);
-  line-height: 125%;
   text-align: center;
 }