:root {
  --person-box-background-color: var(--color-cyan-light);
  --person-box-gap: 4rem;
  --person-box-image-width: 30rem;

  @include use-responsive-sizing(--person-box-gap, (xs: 4rem, m: 5rem));
}

.person-box {
  background-color: var(--person-box-background-color);
  display: flex;
  flex-direction: column;
  gap: var(--person-box-gap);

  @include use-responsive-sizing(padding-top padding-bottom, responsive-map(xs 5rem, l 7.5rem));
  @include use-responsive-sizing(padding-right padding-left, responsive-map(xs 2rem, xl 7.5rem));

  @include mq($from: m) {
    flex-direction: row;
  }
}

.person-box__image {
  @include mq($from: m) {
    flex-basis: var(--person-box-image-width);
    flex-shrink: 0;
  }
}

.person-box__headline {
  margin-block-end: 2rem;
}