/**
 * CTA Banner Block Styles
 */
.cta-banner {
  display:none;
  @media (width <= 768px) {
    display: block;
  }
}
.cta-banner-wrapper {
  max-width: 2000px;
  margin: 0 auto;
  container-type: inline-size;
}

.cta-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  min-height: 120px;
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-md);

  @container (width <= 800px) {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
    text-align: left;

  .cta-banner-links {
    align-items: stretch;
    width: 100%;
    gap: var(--spacing-sm);
  }


  .cta-banner-links .button {
    width: calc(50% - var(--spacing-sm));
  }

  .cta-banner-title {
    font-size: var(--font-size-h3, 1.5rem);
  }


  }
}

.cta-banner-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  white-space: nowrap;
}

.cta-banner-title {
  font-size: var(--font-size-h4, 2rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--primary-color);
  margin: 0;
  line-height: 1.2;
}

.cta-banner-links {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}


@media (width <= 480px) {

  .cta-banner-wrapper {
    padding: 0 var(--spacing-sm);
  }
}