mission-vision

Summary

Two mirrored cards under a "who we are" heading. The left card has its plus icon + heading on the left and a paragraph + image on the right; the right card flips both axes — heading + plus on the right, image + paragraph on the left. A small orange square anchors the composition in each card.

HTML structure (minimal)

<div class="who-we-are-section">
  <div class="main-container">
    <h2 class="main-title">who we are</h2>
    <div class="mission-grid">

      <div class="mission-left">
        <div class="mission-title">
          <img src="images/plus.png" class="mission-plus" alt="">
          <h4 class="mission-heading">Our<br>Mission</h4>
        </div>
        <div class="mission-content">
          <div class="mission-text-box">
            <p class="mission-paragraph">We are a creative agency...</p>
            <div class="mission-orange-box"></div>
          </div>
          <img src="images/ab1.jpg" class="mission-img" alt="">
        </div>
      </div>

      <div class="mission-right">
        <div class="mission-title mission-title-right">
          <h4 class="mission-heading mission-heading-right">Our<br>Vision</h4>
          <img src="images/plus.png" class="mission-plus mission-plus-right" alt="">
        </div>
        <div class="mission-content">
          <img src="images/ab2.jpg" class="mission-img mission-img-right" alt="">
          <div class="mission-text-box">
            <div class="mission-orange-box mission-transparent"></div>
            <p class="mission-paragraph mission-paragraph-right">We specialize in...</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Key SCSS tokens

.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
}
.mission-title             { display: flex; align-items: center; margin-bottom: 30px; }
.mission-title-right       { justify-content: flex-end; }
.mission-plus              { width: 70px; }
.mission-heading {
  text-transform: uppercase;
  font-size: 40px;
  font-weight: 200;
  line-height: 40px;
  margin-left: 30px;
}
.mission-heading-right     { text-align: right; margin-left: 0; margin-right: 30px; }
.mission-content {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
}
.mission-paragraph         { font-size: 22px; line-height: 28px; margin-bottom: 100px; }
.mission-paragraph-right   { margin-top: 100px; margin-bottom: 0; margin-left: 20px; }
.mission-orange-box {
  background-color: var(--default);
  border: 1px solid var(--default);
  border-radius: 5px;
  width: 30px; height: 30px;
  align-self: flex-start;
}
.mission-orange-box.mission-transparent {
  background-color: var(--transparent);
  margin-top: 20px;
  margin-left: 20px;
}
.mission-img               { border-radius: 10px; width: 240px; margin-left: 40px; }
.mission-img-right         { margin-left: 0; }

Animation logic

// Two IX2 timelines (data-w-id="darkyn09" and "darkyn24") fade the two
// halves in from opacity:0. Equivalent: IntersectionObserver +
// transition opacity, translateY(40px)→0, with a 200ms offset between
// the left and right card.

Notable details

• The mirroring is deliberate and double — both the heading row AND the inner content row flip. That's why every directional rule has a *-right modifier.
• The orange square is the same component used twice: a filled version on the left card sits at the top of the paragraph; on the right card it's outlined-only (.mission-transparent) and floats at the bottom — small but stops the composition feeling perfectly symmetric.
• Card image is fixed at 240px wide — small enough to read as a "supporting" element rather than a hero, intentionally underselling the photo.

Use when

• About sections that need to communicate two complementary statements (mission/vision, principles/process, etc.) inside one frame.
• Wherever symmetry would feel mechanical and you want a small asymmetry to break it.

Caveats

• The mirrored layout requires four -right modifier classes; if you remove one the symmetry breaks visibly.