Custom layout code help

Can anyone explain why the following code isn’t making the first card span the whole dashboard (it’s showing in the top left only)?

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  margin: 0px
  padding: 0px
  grid-template-columns: 50% 50%
  grid-template-rows: auto auto
  grid-template-areas: |
    "a1 a1"
    "a2 b2"
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout: {}
    cards:
      - type: custom:better-moment-card
        parentStyle: |
          line-height:normal;
        moment:
          - parentStyle: |
              font-size:4em;  text-align:center; font-weight:400;
            templateRaw: |
              {{moment format=HH:mm:ss}}
          - parentStyle: |
              font-size:1.9em; text-align:center; margin-top:5px;
            templateRaw: |
              {{moment format=cccc, dd LLLL}}
        view_layout:
          grid-area: a1
  - show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.forecast_home
    forecast_type: hourly
    view_layout:
      grid-area: a2
  - show_current: false
    show_forecast: true
    type: weather-forecast
    entity: weather.redcliffe
    forecast_type: daily
    view_layout:
      grid-area: b2