.text-area {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  width: clamp(300px, 100%, 1200px);
  margin: auto;
  padding: 2rem;
  align-items: flex-start;
}
/* Example usage (layout):
  <section class="text-area">
    <section class="no-columns">
      <h1>Craftsmen in a City of Industry</h1>
      <p>As Cleveland begins its emergence as America's next great filmmaking capital...</p>
      <a href="creative-spaces.html">
        <button class="little-cta">LEARN MORE ABOUT Cleveland'S NEXT GREAT INDUSTRY</button>
      </a>
    </section>
    <section class="little-column">
      <h3>creative spaces progress</h3>
      <p><strong>✓</strong> Secured Real Estate Partner (Costanzo FLP)</p>
    </section>
  </section>
*/
.text-area .text-area {
  padding: 0;
}
.text-area h1,
.text-area h2,
.text-area h3,
.text-area p {
  margin-bottom: 1rem;
}
/* --- LINK and CTA alignment helpers --- */
/* --- CENTER LITTLE-CTA IN LINKS --- */
a .little-cta,
a.little-cta,
a > .little-cta {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
a {
  text-align: center;
}
/* --- CHECK LISTS --- */
.checklist {
  list-style: none; /* Remove default bullets */
  padding-left: 0; /* Remove padding */
  margin: 0;
}
ul.checklist li {
  position: relative; /* Position relative for custom bullets */
  padding-left: 1.5rem; /* Space for custom bullet */
  margin-bottom: 0.5rem; /* Space between items */
}
ul.checklist li::before {
  content: "☐"; /* Custom bullet */
  color: var(--secondary-color);
  position: absolute;
  left: 0;
}
ul.checklist li.checked::before {
  content: "☑"; /* Custom bullet */
  color: var(--secondary-color);
  position: absolute;
  left: 0;
}

/* --- CENTER LITTLE-CTA IN NO-COLUMNS --- */
.no-columns a {
  display: block;
  margin: auto;
}
.no-columns a .little-cta {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.big-column {
  flex: 2 2 66.67%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.big-column a {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.little-column {
  flex: 1;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.no-columns {
  min-width: 320px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}