.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: var(--section-padding);
  position: relative;
}

/* ─── Flowing section backgrounds ─────────────── */
.gallery {
  background-color: var(--color-cream);
}

.atelier {
  background: linear-gradient(
    180deg,
    var(--color-cream) 0%,
    var(--color-cream-blue) 100%
  );
}

.workshops {
  background-color: var(--color-cream-blue);
}

.contact {
  background: linear-gradient(
    180deg,
    var(--color-cream-blue) 0%,
    var(--color-section-cool) 100%
  );
}

/* ─── Organic blob dividers between sections ──── */
.blob-divider {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -1px;
  position: relative;
  z-index: 2;
}

.blob-divider--cream-to-cool path {
  fill: var(--color-cream);
}

.blob-divider--cool-to-cream path {
  fill: var(--color-cream-blue);
}

.blob-divider--cool-to-blue path {
  fill: var(--color-section-cool);
}

@media (max-width: 767px) {
  .section {
    padding-block: clamp(2.5rem, 6vw, 4rem);
  }

  .container {
    padding-inline: var(--space-4);
  }
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-8);
  }
}

@media (min-width: 1100px) {
  .container {
    padding-inline: var(--space-12);
  }
}