p[class^='necessity-'] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);

  @media (40.1rem < width) {
    flex-direction: row;
  }

  &::before {
    --icon-size: 20px;
    content: "";
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);

    @media (40.1rem < width) {
      --icon-size: 24px;
    }
  }

}

.necessity-yes::before {
  --fill-necessary: #04703E;
  mask: var(--icon-necessary) no-repeat center / contain;
  background-color: var(--fill-necessary);
}
.necessity-no::before {
  --fill-unnecessary: #ED0E00;
  mask: var(--icon-unnecessary) no-repeat center / contain;
  background-color: var(--fill-unnecessary);
}