/* =========================================================
   LeadSprint – Content section (base)
========================================================= */

.ls-content{
  position: relative;
}

.ls-content-inner{
  display: grid;
  grid-template-columns: 3fr 2.3fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.ls-content-text{
  color: var(--color-primary);
  display: flex;
  flex-direction: column;
  font-family: "Playfair Display", Georgia, serif;
}

.ls-content-lead{
  margin-top: 4px;
  font-size: 1.05em;
  line-height: 1.6;
  color: var(--color-muted);
}


.ls-content-body{
  max-width: 52ch;
  color: var(--color-text)
}

.ls-content-divider{
  display: block;
  width: 56px;
  height: 4px;
  background: var(--color-primary);
  margin-bottom: 12px;
}

/*afbeelding stijl en gedraging*/

.ls-content-visual{
  border-radius: 18px;
  overflow: hidden;
}

.ls-content-visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* default (normal) */
.ls-content{
  padding-block: clamp(96px, 12vw, 140px);
}

/* spacing modifiers */
.ls-content--compact{
  padding-block: clamp(64px, 8vw, 96px);
}

.ls-content--spacious{
  padding-block: clamp(120px, 16vw, 180px);
}



@media (max-width: 900px){

  .ls-content-inner{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ls-content-visual{
    order: 2;
  }

}