@layer components {
  .layout {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template:
      "announcement"  min-content
      "mobile-header" min-content
      "main"          1fr
      "footer"        min-content
      "nav-bar"       min-content / minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-rows: min-content;
    
    @media (width >= 48rem) {
      grid:
        "announcement" min-content
        "nav-bar"      min-content
        "main"         1fr
        "footer"       min-content / minmax(0, 1fr);
    }
  }
}