@layer ds_layout {
  .layout-holy-grail {
    --ds-web-component-drawer-toggle-display: none;
    --ds-web-component-header-height: var(
      --ds-layout-holy-grail-header-height-compact
    );

    @container body (width > 50rem) {
      --ds-web-component-drawer-toggle-display: inline-block;
      --ds-web-component-header-height: var(
        --ds-layout-holy-grail-header-height-relaxed
      );
    }

    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header"
      "main"
      "footer";

    #header {
      grid-area: header;
      position: sticky;
      top: 0;
      z-index: 100;
      height: var(--ds-layout-holy-grail-header-height-compact);
    }

    #drawer {
      position: fixed;
      transition: transform 0.33s ease-in-out;
      z-index: 80;
      transform: translateX(-100%);
      left: 0;
      top: var(--ds-layout-holy-grail-header-height-compact);
      height: calc(100vh - var(--ds-layout-holy-grail-header-height-compact));
      height: calc(100dvh - var(--ds-layout-holy-grail-header-height-compact));
      overflow-y: auto;
      width: var(--ds-layout-holy-grail-drawer-width-below-desktop);

      body:has([data-drawer-open="true"]) & {
        transform: translateX(0);
      }
    }

    #main {
      grid-area: main;
    }

    #footer {
      grid-area: footer;
    }

    --main-max-width: calc(
      var(--ds-semantic-page-max-width) -
        var(--ds-layout-holy-grail-drawer-width-desktop)
    );

    @container body (width > 50rem) {
      grid-template-columns:
        minmax(var(--ds-layout-holy-grail-gutter-auto), auto) var(
          --ds-layout-holy-grail-drawer-width-desktop
        )
        minmax(auto, var(--main-max-width))
        minmax(var(--ds-layout-holy-grail-gutter-auto), auto);
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header header header"
        ". drawer main ."
        "footer footer footer footer";

      #header {
        height: var(--ds-layout-holy-grail-header-height-relaxed);
      }

      #drawer {
        grid-area: drawer;
        position: static;
        transform: none;
        transition: none;
        width: var(--ds-layout-holy-grail-drawer-width-desktop);
        height: auto;
        overflow: visible;

        /* The drawer bounds the sticky nav above the footer, even on short pages. */
        #nav {
          /* Leave room for focus outlines inside the scrollport. */
          padding-block: var(--ds-semantic-ui-outline-width-focus);
          position: sticky;
          top: calc(
            var(--ds-layout-holy-grail-header-height-relaxed) +
              var(--ds-component-drawer-padding-block)
          );
          max-height: calc(
            100vh - var(--ds-layout-holy-grail-header-height-relaxed) -
              2 * var(--ds-component-drawer-padding-block)
          );
          max-height: calc(
            100dvh - var(--ds-layout-holy-grail-header-height-relaxed) -
              2 * var(--ds-component-drawer-padding-block)
          );
          overflow-y: auto;
        }
      }

      #footer {
        z-index: 100;
      }
    }
  }
}