/* ==========================================================================
	Component Header
============================================================================= */
.component__header {
  --color: #0e4168;
  --title-color: #0e4168;
  color: var(--color);
  margin-block-end: clamp(30px, -1.914893617px + 6.3829787234vw, 90px);
  margin-block-end: clamp(1.875rem, -0.11968rem + 6.3829787234vw, 5.625rem);
}

.component__header-inner {
  max-inline-size: 840px;
  max-inline-size: 52.5rem;
  display: grid;
  gap: 14px;
  gap: 0.875rem;
  grid-template-columns: 100%;
  container-type: inline-size;
  margin-inline: auto;
}

.component__title {
  color: var(--title-color);
  font-size: clamp(28px, 17.3333333333px + 3.3333333333cqi, 44px);
  font-size: clamp(1.75rem, 1.08333rem + 3.3333333333cqi, 2.75rem);
  font-weight: 800;
  line-height: 1.3;
}

.component__description {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.625;
}
@container (min-width: 500px) {
  .component__description {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.7777777778;
  }
}

.component__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  gap: 0.625rem 1.875rem;
}
@media (max-width:46.1875rem) {
  .component__actions {
    flex-direction: column;
  }
}
/*# sourceMappingURL=component-header.css.map */