:root {
  --branding-box-background-color: var(--color-blue-light);
}

.branding-box {
  align-items: center;
  background-color: var(--branding-box-background-color);
  display: flex;
  flex-direction: column;
  gap: 4rem;

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

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

.branding-box__image {
  flex-shrink: 0;
  inline-size: 20rem;
}

.branding-box__content {
  text-align: center;

  @include mq($from: m) {
    .branding-box__image + & {
      text-align: start;
    }
  }
}

.branding-box__text {
  margin-block-start: 2rem;

  > * + * {
    margin-block-start: 1.5rem;
  }
}

.branding-box__button {
  margin-block-start: 3rem;
}