.SectionImage {
  position: relative;
  width: 100%;
  color: var(--clr-black);
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

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

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

.SectionImage-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  height: 100%;
}

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

.SectionImage-inner {
    gap: 130px;
}
  }

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

.SectionImage-inner {
    display: flex;
    flex-direction: row;
}
  }

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

.SectionImage-column-content,
.SectionImage-column-image {
  display: flex;
  width: 100%;
}

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

.SectionImage-column-content,
.SectionImage-column-image {
    width: 50%;
}
  }

.SectionImage-column-content {
  order: 1;
}

.SectionImage-column-image {
  order: 2;
}

.SectionImage--content-right .SectionImage-column-image {
  order: 1 !important;
}

.SectionImage--content-right .SectionImage-column-content {
  order: 2 !important;
}

.Picture.SectionImage-image {
  border-radius: 10px !important;
}

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

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

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