:root {
  --icon-with-text-color: currentColor;
  --icon-with-text-icon-color: currentColor;
}

.icon-with-text {
  color: var(--icon-with-text-color);
  display: flex;
  gap: 1em;
}

.icon-with-text__icon {
  color: var(--icon-with-text-icon-color);
  flex-shrink: 0;
  font-size: 1.6em;

  @include mq($from: m) {
    font-size: 2.7em;
  }
}

.icon-with-text__text {
  align-self: center;
  flex-grow: 2;
  line-height: var(--line-height-body);

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