.Section {
  position: relative;
  width: 100%;
  margin-top: 0;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

@media screen and (min-width: 600.02px) {

.Section {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}
  }

.Section-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.Section--brown {
  --font-clr-primary: var(--clr-white);
  background-color: var(--clr-primary);
}

.Section--black {
  --font-clr-primary: var(--clr-white);
  background-color: var(--clr-black);
}

.Section--grey {
  --font-clr-primary: var(--clr-black);
  background-color: #C3C0B9;
}

.Section--white {
  --font-clr-primary: var(--clr-black);
  background-color: var(--clr-white);
}

.Section--light-grey {
  --font-clr-primary: var(--clr-black);
  background: rgba(134, 129, 115, 0.10);
}