@layer kz-components {
  .root {
    display: grid;
    background-color: var(--color-white);
    grid-template: 'branding' min-content 'titles' max-content 'actions' min-content / 1fr;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--spacing-24);
    gap: var(--spacing-16);
    border-bottom: 2px solid rgb(var(--color-gray-600-rgb), 0.1);

    @media (width >= 768px) {
      align-items: start;
      grid-template: 'branding titles actions' min-content / 1fr max-content 1fr;
      position: sticky;
      top: 0;
      z-index: 1;
    }
  }
}