site/layouts/partials/about.html

@@ -3,14 +3,14 @@
   <section class="l-relative l-screen-min-full">
     <div class="l-underlay about-bg"></div>
     <div class="l-section-pad l-wrapper l-flex-2-col-m about-section">
-      <div class="about-section__info">
+      <div class="about-info">
-        <div class="about-icon"></div>
         <h2>About Heading One</h2>
+        <div class="section-icon"></div>
         <p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p>
         <p>Amet sed ullam ea dolore corrupti sit. Alias aut doloribus explicabo perferendis fuga? Quas nostrum aut earum tempora voluptatem, magnam? Veritatis corrupti perspiciatis at aliquid perspiciatis Eligendi reprehenderit quidem veniam</p>
         <p>Amet dolore atque iure inventore vitae Dolores fuga porro quo odit et autem. Sint est nesciunt unde non aliquid officiis fugit Repellat cum sequi cum fugiat fugit Voluptatem quaerat quibusdam.</p>
       </div>
-      <div class="about-section__card">
+      <div>
         <div class="c-img-card about-card">
           <div class="c-img-card__header about-card-bg-img about-card-bg-img-1"></div>
           <div class="c-img-card__body">
@@ -27,26 +27,23 @@
 
   <section class="l-relative l-screen-min-full">
     <div class="l-underlay about-bg about-bg--secondary"></div>
-    <div class="l-section-pad l-wrapper l-flex-2-col-m about-section about-section--swapped">
+    <div class="l-section-pad l-wrapper l-flex-2-col-m">
-      <div class="about-section__info">
+      <div>
-        <div class="about-icon"></div>
         <h2>About Heading Two</h2>
+        <div class="section-icon"></div>
         <p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p>
         <p>Amet sed ullam ea dolore corrupti sit. Alias aut doloribus explicabo perferendis fuga? Quas nostrum aut earum tempora voluptatem, magnam? Veritatis corrupti perspiciatis at aliquid perspiciatis Eligendi reprehenderit quidem veniam</p>
         <p>Amet dolore atque iure inventore vitae Dolores fuga porro quo odit et autem. Sint est nesciunt unde non aliquid officiis fugit Repellat cum sequi cum fugiat fugit Voluptatem quaerat quibusdam.</p>
       </div>
-      <div class="about-section__card">
+      <div>
-        <div class="c-img-card about-card">
+        <div class="c-img-card">
-          <div class="c-img-card__header about-card-bg-img about-card-bg-img-2"></div>
+          <img src="https://via.placeholder.com/300x400" alt="CARD IMAGE">
-          <div class="c-img-card__body">
+          <h3>Another Card Heading</h3>
-            <div class="c-img-card__body-bg about-card-bg-2"></div>
-          <h3>Card Heading</h3>
           <p>
             Amet recusandae optio quia velit quisquam. Dolorem ipsam non modi est quisquam? Quia inventore neque amet laudantium impedit a, dignissimos. Repellendus vero animi saepe tempora quibusdam! Repudiandae esse ex adipisci
           </p>
-          </div>
-        </div>
       </div>
+        </div>
     </div>
   </section>
 

src/css/imports/layout.scss

@@ -1,6 +1,6 @@
 .l-wrapper {
   width: 100%;
-  max-width: 80rem;
+  max-width: 90rem;
   margin-left: auto;
   margin-right: auto;
 

src/css/main.css

@@ -193,26 +193,13 @@ html.is-animating .transition-fade {
 
 .about-section {
   align-items: flex-end;
+}
 
-  &__info {
+.about-info {
-    padding: 0;
+  padding: 0;
 
-    @media (min-width: $bp-m) {
+  @media (min-width: $bp-m) {
-      padding-right: 64px;
+    padding-right: 64px;
-    }
-  }
-
-  &--swapped {
-    .about-section__info {
-      order: 2;
-      @media (min-width: $bp-m) {
-        padding-left: 64px;
-      }
-    }
-
-    .about-section__card {
-      order: 1;
-    }
   }
 }
 
@@ -230,14 +217,6 @@ html.is-animating .transition-fade {
     max-width: 26em;
     height: 40em;
     margin-left: auto;
-    margin-right: initial;
-  }
-}
-
-.about-section--swapped .about-card {
-  @media (min-width: $bp-m) {
-    margin-left: initial;
-    margin-right: auto;
   }
 }
 
@@ -254,23 +233,6 @@ html.is-animating .transition-fade {
   background-image: url(https://via.placeholder.com/300x400);
 }
 
-.about-card-bg-2 {
-  background-color: lightblue;
-}
-
-.about-card-bg-img-2 {
-  background-image: url(https://via.placeholder.com/300x400);
-}
-
-.about-icon {
-  width: 4em;
-  height: 4em;
-  border-radius: 50%;
-  margin-bottom: 1.25rem;
-  background-color: blue;
-  opacity: 0.2;
-}
-
 // services
 
 .services-bg {