@media (max-width: 1199px) {
    :root {
      --hbf-container-x: var(--hbf-container-x-tablet);
      --hbf-section-y: var(--hbf-section-y-tablet);
    }
  }

  @media (max-width: 991px) {
    :root {
      --hbf-grid-gap: var(--hbf-grid-gap-tablet);
    }

    .hbf-grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .hbf-btn {
      min-height: 52px;
    }

    .hbf-card__inner {
      padding: 24px 22px 22px;
    }
  }

  @media (max-width: 640px) {
    :root {
      --hbf-container-x: var(--hbf-container-x-mobile);
      --hbf-section-y: var(--hbf-section-y-mobile);
      --hbf-grid-gap: var(--hbf-grid-gap-mobile);
      --hbf-body: 15px;
      --hbf-small: 12px;
      --hbf-button: 15px;
      --hbf-h1: clamp(34px, 11vw, 48px);
      --hbf-h2: clamp(28px, 8vw, 38px);
      --hbf-h3: clamp(22px, 6vw, 28px);
      --hbf-h4: clamp(18px, 5vw, 22px);
      --hbf-lead: clamp(17px, 4.8vw, 20px);
    }

    .hbf-kicker {
      min-height: 36px;
      padding: 9px 12px;
    }

    .hbf-highlight {
      padding: 16px 16px;
      border-radius: 16px;
      font-size: 15px;
    }

    .hbf-card {
      border-radius: 20px;
    }

    .hbf-card__inner {
      padding: 22px 20px 20px;
    }

    .hbf-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .hbf-btn {
      width: 100%;
    }
  }