.info-banner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md, 16px);
  padding: var(--space-md, 16px);
  border-radius: var(--border-radius-border-radius-lg, 16px);
}
.info-banner-type-neutral {
  background: var(--color-surface-info, #E8F1FF);
}
.info-banner-type-neutral .close-icon path {
  fill: var(--color-foreground-on-info-strong,#0A3576);
}
.info-banner-type-neutral .description a {
  color: var(--color-foreground-on-info,#1975FF);
}
.info-banner .left-side-section {
  gap: var(--space-sm, 8px);
  align-items: center;
}
.info-banner .close-icon {
  cursor: pointer;
}
.info-banner-type-positive {
  background: var(--color-surface-success,#DBF9E8);
}
.info-banner-type-positive .close-icon path {
  fill:var(--color-foreground-on-success-strong,#004C22);
}
.info-banner-type-positive .description a {
  color: var(--color-foreground-on-success,#01BF55);
}
.info-banner-type-negative {
  background: var(--color-surface-error,#FFE4E6);
}
.info-banner-type-negative .close-icon path {
  fill:var(--color-foreground-on-error-strong,#650008);
}
.info-banner-type-negative .description a {
  color: var(--color-foreground-on-error,#FC0114);
}
.info-banner-type-warning {
  background: var(--color-surface-warning,#FFF3E6);
}
.info-banner-type-warning .description a {
  color: var(--color-foreground-on-warning,#FF8400);
}
.info-banner-type-warning .close-icon path {
  fill: var(--color-foreground-on-warning-strong,#663500);
}
.info-banner .description {
  font-size: var(--typography-font-size-footnote-sm, 14px);
  line-height: var(--typography-line-height-heading5-lg, 20px);
}
.info-banner .description a {
  text-decoration: underline;
  font-weight: var(--font-weight-font-weight-bold, 700);
}
.info-icon {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
}
.info-banner-type-neutral .info-icon {
  background-image: url(assets/neutral.svg);
}
.info-banner-type-positive .info-icon {
  background-image: url(assets/positive.svg);
}
.info-banner-type-negative .info-icon {
  background-image: url(assets/negative.svg);
}
.info-banner-type-warning .info-icon {
  background-image: url(assets/warning.svg);
}
@media only screen and (max-width: 960px) { 
  .info-banner .description {
    width: calc(100% - 28px);
  }
  .info-banner .left-side-section {
    align-items: flex-start;
  }
}