/* ==================================================
   Section Component
   schwimm einfach Theme
================================================== */

/*
 * Standard-Section
 *
 * Grundabstand für normale Inhaltsbereiche.
 */
.section {
  padding-block: var(--section-padding-desktop);
}

/*
 * Kleinere Section
 *
 * Für kompaktere Bereiche mit weniger
 * Abstand nach oben und unten.
 */
.section--small {
  padding-block: var(--space-48);
}

/*
 * Große Section
 *
 * Für besonders großzügige Bereiche,
 * beispielsweise wichtige Startseitenabschnitte.
 */
.section--large {
  padding-block: var(--space-120);
}

/* Background variants */

.section--white {
  background-color: var(--color-white);
}

.section--light {
  background-color: var(--color-background);
}

.section--primary {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.section--secondary {
  color: var(--color-white);
  background-color: var(--color-secondary);
}

/*
 * Entfernt den oberen oder unteren Abstand.
 *
 * Nur für Sonderfälle verwenden, wenn Sections
 * direkt an andere Elemente anschließen sollen.
 */
.section--no-padding-top {
  padding-top: 0;
}

.section--no-padding-bottom {
  padding-bottom: 0;
}

/* Responsive */

@media (max-width: 992px) {
  .section {
    padding-block: var(--section-padding-tablet);
  }

  .section--small {
    padding-block: var(--space-40);
  }

  .section--large {
    padding-block: var(--space-96);
  }
}

@media (max-width: 768px) {
  .section {
    padding-block: var(--section-padding-mobile);
  }

  .section--small {
    padding-block: var(--space-32);
  }

  .section--large {
    padding-block: var(--space-64);
  }
}