@layer components {
  .banner {
    align-items: center;
    background-color: var(--color-sidebar);
    color: var(--color-sidebar-text);
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
    grid-area: header;
    padding: var(--size-6) var(--size-5);
    text-align: center;
    view-transition-name: header;
  }
}