.grid {
    position: relative;
    display: block;
    width: 100%;
    padding: var(--gutter-y, 2rem) var(--gutter-x, 2rem);
    box-sizing: border-box;
}
.grid > .wrapper {
    position: relative;
    display: grid;
    width: 100%;
    margin: auto;
    align-items: stretch;
    grid-auto-flow: row;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "a a a a a a a a a a a a";
    gap: var(--columns-gutter-y, 1rem) var(--columns-gutter-x, 1rem);
    box-sizing: border-box;
}
.grid > .wrapper > .item-0 { grid-area: a; }
.grid > .wrapper > .item-1 { grid-area: b; }
.grid > .wrapper > .item-2 { grid-area: c; }
.grid > .wrapper > .item-3 { grid-area: d; }
.grid > .wrapper > .item-4 { grid-area: e; }
.grid > .wrapper > .item-5 { grid-area: f; }
.grid > .wrapper > .item-6 { grid-area: g; }
.grid > .wrapper > .item-7 { grid-area: h; }
.grid > .wrapper > .item-8 { grid-area: i; }
.grid > .wrapper > .item-9 { grid-area: j; }
.grid > .wrapper > .item-10 { grid-area: k; }
.grid > .wrapper > .item-11 { grid-area: l; }

.pageroot .grid > .wrapper > .item > .dropzone { height: 100%; }

/*  layout  */
/*  two  */
.grid-layout-one-one > .wrapper {
    grid-template-areas:
		"a a a a a a b b b b b b";
}
.grid-layout-two-one > .wrapper {
    grid-template-areas:
		"a a a a a a a a b b b b";
}
.grid-layout-one-two > .wrapper {
    grid-template-areas:
		"a a a a b b b b b b b b";
}
.grid-layout-three-one > .wrapper {
    grid-template-areas:
		"a a a a a a a a a b b b";
}
.grid-layout-one-three > .wrapper {
    grid-template-areas:
		"a a a b b b b b b b b b";
}
/*  three  */
.grid-layout-one-one-one > .wrapper {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
		"a b c";
}
.grid-layout-one-one-two > .wrapper {
    grid-template-areas:
		"a a a b b b c c c c c c";
}
.grid-layout-one-two-one > .wrapper {
    grid-template-areas:
		"a a a b b b b b b c c c";
}
.grid-layout-two-one-one > .wrapper {
    grid-template-areas:
		"a a a a a a b b b c c c";
}
.grid-layout-oneone-one > .wrapper {
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
		"a a a a a a c c c c c c"
		"b b b b b b c c c c c c";
}
.grid-layout-one-oneone > .wrapper {
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
		"a a a a a a b b b b b b"
		"a a a a a a c c c c c c";
}
.grid-layout-oneone-two > .wrapper {
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
		"a a a a c c c c c c c c"
		"b b b b c c c c c c c c";
}
.grid-layout-two-oneone > .wrapper {
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
		"a a a a a a a a b b b b"
		"a a a a a a a a c c c c";
}
/*  four  */
.grid-layout-one-one-one-one > .wrapper {
    grid-template-areas:
		"a a a b b b c c c d d d";
}
.grid-layout-onetwo-twoone > .wrapper {
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
		"a a a a b b b b b b b b"
		"c c c c c c c c d d d d";
}
.grid-layout-twoone-onetwo > .wrapper {
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
		"a a a a a a a a b b b b"
		"c c c c d d d d d d d d";
}
/*  five  */
.grid-layout-one-one-one-one-one > .wrapper {
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas:
		"a b c d e";
}
/*  six  */
.grid-layout-one-one-one-one-one-one > .wrapper {
    grid-template-areas:
		"a a b b c c d d e e f f";
}
.grid-layout-oneone-oneone-oneone > .wrapper {
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
		"a a a a b b b b c c c c"
		"d d d d e e e e f f f f";
}

/*  background colors  */
.grid-bgcolor-white { background: #FFFFFF; }
.grid-bgcolor-lightgrey { background: #F0F0F0; }
.grid-bgcolor-grey { background: #AAAAAA; }
.grid-bgcolor-darkgrey { background: #666666; color: #FFFFFF; }
.grid-bgcolor-black { background: #000000; color: #FFFFFF; }

/*  bgimage  */
.grid > .image { position: absolute; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
.grid > .image * { width: 100%; height: 100%; object-fit: cover; }

/*  padding  */
.grid-padding-none { padding: 0; }
.grid-padding-small { padding: max(var(--gutter-min-y, 1rem), var(--gutter-y, 1rem) / 2) max(var(--gutter-min-x, 1rem), var(--gutter-x, 1rem) / 2); }
.grid-padding-large { padding: calc(var(--gutter-y, 1rem) * 2) calc(var(--gutter-x, 1rem) * 2); }
.grid-padding-vertical { padding: 0 var(--gutter-x, 2rem); }
.grid-padding-horizontal { padding: var(--gutter-y, 2rem) 0; }
.grid-padding-top { padding: var(--gutter-y, 2rem) 0 0 0; }
.grid-padding-bottom { padding: 0 0 var(--gutter-y, 2rem) 0; }

/*  gap  */
.grid-gap-none > .wrapper { gap: 0; }
.grid-gap-small > .wrapper { gap: max(var(--column-gutter-min-y, 1rem), var(--columns-gutter-y, 1rem) / 2) max(var(--column-gutter-min-x, 1rem), var(--columns-gutter-x, 1rem) / 2); }
.grid-gap-large > .wrapper { gap: calc(var(--columns-gutter-y, 1rem) * 2) calc(var(--columns-gutter-x, 1rem) * 2); }