/* ========================================
   Info Block (flow-info-block)
   ======================================== */
.info-block {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border: 2px solid var(--border-color, currentColor);
  border-radius: 1rem;
  background: var(--bg-color, transparent);
  color: var(--text-color, var(--almost-black));
  margin-bottom: 2.5rem;
}

/* Icon */
.info-block__icon {
  flex: 0 0 auto;
  font-size: 1.75rem;
  line-height: 1;
  margin-top: 0.25rem; /* optical align */
  color: inherit;
}

/* Content */
.info-block__content {
  flex: 1 1 auto;
  max-width: 75%;
}

.info-block__heading {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.info-block__text p {
  margin: 0;
}

/* ========================================
     Theme Variations
     ======================================== */

/* Info theme */
.info-block--info {
  --border-color: #009eb3;
  --bg-color: #5bc2e733; /* cool grey */
  --text-color: #0b0c0c; /* almost black */
}

/* Warning theme */
.info-block--warning {
  --border-color: #eb6c0d; /* orange */
  --bg-color: rgba(235, 108, 13, 0.2); /* orange tint */
  --text-color: #0b0c0c; /* almost black */
}

/* ========================================
     Responsiveness
     ======================================== */
@media (min-width: 48rem) {
  .info-block {
    padding: 2rem;
    gap: 1.25rem;
  }

  .info-block__icon {
    font-size: 2rem;
  }
}