:root {
  --infobox-background-color: var(--color-cyan-light);
  --infobox-content-width: 100%;
  --infobox-icon-color: var(--color-orange);
  --infobox-icon-size: 5.5rem;

  @include use-responsive-sizing(--infobox-padding-block, responsive-map(xs 3rem, xl 6rem));
  @include use-responsive-sizing(--infobox-padding-inline, responsive-map(xs 2rem, l 3rem));
}

.info-box {
  background-color: var(--infobox-background-color);
  padding: var(--infobox-padding-block) var(--infobox-padding-inline);
}

.info-box__inner {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--infobox-content-width);
}

.info-box__icon {
  color: var(--infobox-icon-color);
  font-size: var(--infobox-icon-size);
  margin-block-end: 3rem;
}

.info-box__content {
  line-height: var(--line-height-body);
  margin-block-start: 2.5rem;
}

.info-box__block {
  & + & {
    margin-block-start: 2rem;
  }

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