//
// Commerce Kickstart Layout builder - Hero.
// ----------------------------
//
@import "../../global";

:root {
  --cklb-hero-content-max-width: 800px;
}

.cklb-hero {
  .content {
    display: grid;
  }

  .cklb-title,
  .cklb-subtitle,
  .cklb-text {
    max-width: var(--cklb-hero-content-max-width);
  }

  &.text-end {
    .content {
      justify-content: flex-end;
    }
  }

  &.text-center {
    .content {
      justify-content: center;
    }
  }
}
