@layer windfce_colorblock {
  .frame-type-windfce_colorblock {
    display: flex;
    flex-flow: column;
    gap: 1.25rem;
    padding: 1.875rem;
    border-radius: var(--wind-fce-radius, 0.5rem);
    header,
    .text {
      * {
        margin: 0;
      }
    }
    &.frame-layout-0 {
      background: var(--wind-fce-color-primary, #bfdbfe);
      color: var(--wind-fce-color-on-primary, #1e293b);
    }
    &.frame-layout-1 {
      background: var(--wind-fce-color-primary-light, #eff6ff);
      color: var(--wind-fce-color-text, #1e293b);
    }
    &.frame-layout-2 {
      background: var(--wind-fce-color-secondary, #fde68a);
      color: var(--wind-fce-color-on-secondary, #1e293b);
    }
    &.frame-layout-3 {
      background: var(--wind-fce-color-secondary-light, #fffbeb);
      color: var(--wind-fce-color-text, #1e293b);
    }
    &.frame-layout-4 {
      background: var(--wind-fce-color-accent-light, #ecfdf5);
      color: var(--wind-fce-color-text, #1e293b);
    }
    &.frame-layout-5 {
      background: var(--wind-fce-color-surface, #fff);
      color: var(--wind-fce-color-text, #1e293b);
      box-shadow: var(--wind-fce-shadow);
    }
  }
}