add services card styling

site/layouts/partials/about.html

@@ -2,8 +2,8 @@
 
   <section class="l-relative l-screen-min-full">
     <div class="l-underlay about-bg"></div>
-    <div class="l-section-pad l-wrapper">
+    <div class="l-section-pad l-wrapper l-flex-2-col-m about-section">
-      <div>
+      <div class="about-info">
         <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>
@@ -11,18 +11,23 @@
         <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>
-        <img src="https://via.placeholder.com/300x400" alt="CARD IMAGE">
+        <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">
+            <div class="c-img-card__body-bg about-card-bg-1"></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>
   </section>
 
   <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">
+    <div class="l-section-pad l-wrapper l-flex-2-col-m">
       <div>
         <h2>About Heading Two</h2>
         <div class="section-icon"></div>
@@ -31,6 +36,7 @@
         <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>
+        <div class="c-img-card">
           <img src="https://via.placeholder.com/300x400" alt="CARD IMAGE">
           <h3>Another Card Heading</h3>
           <p>
@@ -38,6 +44,7 @@
           </p>
       </div>
         </div>
+    </div>
   </section>
 
 </article>

src/css/imports/components/base.scss

@@ -0,0 +1,75 @@
+// a card
+.c-img-card {
+  $bp-collapse: $bp-s;
+
+  z-index: 1;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+
+  &__body {
+    padding: 32px 48px;
+  }
+
+  &__body-bg {
+    z-index: -1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  @media (max-width: $bp-collapse) {
+    &__header,
+    &__body,
+    &__body-bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+    }
+
+    &__header {
+      z-index: -1;
+    }
+
+    &__body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+
+    &__body-bg {
+      opacity: 0.6;
+    }
+  }
+
+  @media (min-width: $bp-collapse) {
+    display: flex;
+    flex-direction: column;
+
+    &__header,
+    &__body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &__header {
+      flex: 0 1 50%;
+    }
+
+    &__body {
+      position: relative;
+      flex: 1 0 50%;
+    }
+
+    &__body-bg {
+      opacity: 1;
+    }
+  }
+}

src/css/imports/layout.scss

@@ -1,6 +1,6 @@
 .l-wrapper {
   width: 100%;
-  max-width: 70rem;
+  max-width: 90rem;
   margin-left: auto;
   margin-right: auto;
 
@@ -121,6 +121,22 @@
   flex-wrap: wrap;
 }
 
+.l-flex-2-col-m {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+  flex-wrap: wrap;
+
+  > * {
+    flex: 0 0 100%;
+
+    @media (min-width: $bp-m) {
+      flex: 0 0 50%;
+    }
+  }
+}
+
 .l-flex-list-col {
   display: flex;
   flex-direction: column;

src/css/main.css

@@ -11,6 +11,8 @@
 @import "imports/utility.scss";
 @import "imports/blocks.scss";
 
+@import "imports/components/base.scss";
+
 @import "mapbox-gl/dist/mapbox-gl.css";
 
 // swup transition classes
@@ -179,6 +181,58 @@ html.is-animating .transition-fade {
   background-color: var(--primary-500);
 }
 
+// about
+
+.about-bg {
+  background-color: var(--page-bg);
+
+  &--secondary {
+    background-color: var(--neutral-200);
+  }
+}
+
+.about-section {
+  align-items: flex-end;
+}
+
+.about-info {
+  padding: 0;
+
+  @media (min-width: $bp-m) {
+    padding-right: 64px;
+  }
+}
+
+.about-card {
+  height: 30em;
+  width: 100%;
+  max-width: 30em;
+
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 0.9em;
+
+  @media (min-width: $bp-m) {
+    width: 100%;
+    max-width: 26em;
+    height: 40em;
+    margin-left: auto;
+  }
+}
+
+.about-card-bg-img {
+  background-size: cover;
+  background-position: center center;
+}
+
+.about-card-bg-1 {
+  background-color: pink;
+}
+
+.about-card-bg-img-1 {
+  background-image: url(https://via.placeholder.com/300x400);
+}
+
 // services
 
 .services-bg {