/* ==========================================================================
   BLOB-ACHTERGRONDEN (bs-blob)
   Organische vlakken achter de inhoud van een container.
   Gebruik in Elementor > Advanced > CSS Classes:
     bs-blob bs-blob--tr   -> grote blob rechtsboven (Sage)
     bs-blob bs-blob--br   -> kleine blob rechtsonder (Steel Blue)
   Eigen maat/positie/kleur per container kan via Custom CSS:
     selector { --blob-size:360px; --blob-color:rgba(214,200,184,.4); }
   Let op: ::after i.p.v. ::before, want Elementor gebruikt ::before
   op containers voor de Background Overlay.
   ========================================================================== */

.bs-blob{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.bs-blob::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  width:var(--blob-size,420px);
  aspect-ratio:1;
  top:var(--blob-top,auto);
  right:var(--blob-right,auto);
  bottom:var(--blob-bottom,auto);
  left:var(--blob-left,auto);
  background:var(--blob-color,rgba(168,196,160,.25));
  border-radius:58% 42% 55% 45% / 48% 60% 40% 52%;
}

/* Variant: grote blob rechtsboven */
.bs-blob--tr{
  --blob-size:480px;
  --blob-top:-140px;
  --blob-right:-160px;
}

/* Variant: kleine blob rechtsonder */
.bs-blob--br{
  --blob-size:260px;
  --blob-bottom:-90px;
  --blob-right:-80px;
  --blob-color:rgba(144,174,178,.30);
}

/* Mobiel (<=767px) */
@media (max-width:767px){
  .bs-blob--tr{ --blob-size:280px; --blob-top:-100px; --blob-right:-120px; }
  .bs-blob--br{ --blob-size:180px; }
}