:root {
  --textimage-wrapper-gap: 2rem;
  --textimage-content-maxwidth: 26rem;

  @media (min-width: 768px) {
    --textimage-wrapper-gap: 4rem;
  }
}

.textimage-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--textimage-wrapper-gap);

  @media (min-width: 768px) {
    flex-direction: row;

    .textimage-reverse & {
      flex-direction: row-reverse;
    }
  }
}

.textimage-image {
  flex: 1 1 0;
}

.textimage-content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  @media (min-width: 768px) {
    align-items: flex-start;
  }
}