lism-css 0.0.11 → 0.0.12

package/src/scss/state/_flow.scss

@@ -1,46 +1,45 @@
 /*
-	flowG はクエリ調整不可。クエリ調整必要な場合はStack使ってもらえばいい。
-	end:0 がどうせ :first-child に必要なので、 mbs も > * + * 使わず上書き形式で。
-
-	memo: :first-child , :last-child の詳細度は 0-1-0
-
-	.-mbs で上書きできるように 0-1-0 を超えないように注意。
+	Meomo: end:0 がどうせ :first-child に必要なので、 mbs も > * + * 使わず上書き形式で。
+	is--containerと合わせて、カスタム値のセットは is--flow + 変数定義だけでできるように。
 */
 
 .is--flow {
-	// --flowGap: var(--flowGap--m)
+	display: flow-root;
+	// --_fgap: var(--flowM, var(--flowM--m));
+
 	> * {
-		--mbs: var(--flowGap, var(--flowGap--m));
+		--mbs: var(--flowM, var(--flowM--m));
 		margin-block: var(--mbs) 0;
 	}
 }
-
 .-flow\:s > * {
-	--flowGap: var(--flowGap--s);
-}
-
-.-flow\:ms > * {
-	// --flowGap: var(--flowGap--m);
-	--flowGap: var(--flowGap--m);
+	--mbs: var(--flowM--s);
 }
-.-flow\:l > * {
-	--flowGap: var(--flowGap--l);
+.-flow\:m > * {
+	--mbs: var(--flowM--m);
 }
-
-// :where(.is--flow\:) > * {
-// 	--mbs: var(--flowG);
+// .-flow\:l > * {
+// 	--flowM: var(--flowM--l);
+// }
+// .-flow\: > * {
+// 	--mbs: var(--flowM);
 // }
 
 // 見出しの上部余白は少しだけ広くする. ただし、見出し直後の見出しの場合を除く。
 // Note: :first-child での打消しのほうが優先度高くなるように注意する
-.is--flow > :where(h1, h2, h3:not(h2 + h3)) {
-	// --mbsではなく--flowGapを使うことで、is--flow単体（標準時）の直下でのみ効かせる。
-	--flowGap: var(--flowGap--h);
+.is--flow > :where(h1, h2, h3, h4) {
+	margin-block-start: calc(var(--mbs) + var(--flowM--h));
+}
+// :where(h2 + h3, h3 + h4) {
+// 	--flowM--h: 0px;
+// }
+
+// fullwideの連結に余白は基本不要
+.is--flow > :where(.is--fullwide + .is--fullwide) {
+	--mbs: 0;
 }
 
 // :first-child への上書きのほうが優先度高くなるように。
 .is--flow > :first-child {
-	// --mbs への上書きが気軽に書けるよう、--flowGap を 0 に。
-	// --flowGap を 0にすると、子要素に影響するので margin-block-startへ直セット
 	margin-block-start: 0;
 }

package/src/scss/state/_size.scss

@@ -10,30 +10,13 @@
 	}
 }
 
-// Note: 詳細度は 0-1-0 より大きく.
-.is--fullwide + .is--fullwide {
-	--flowGap: 0;
-}
-
 // :is(.alignwide, .is--wide)
 .is--wide {
 	// container-type: inline-size;
-	max-inline-size: var(--wide-size, 100%);
+	max-inline-size: var(--wideSize, 100%);
 }
 
 .is--overwide {
-	max-inline-size: var(--overwide-size, 100vw);
-	margin-inline: calc(50% - var(--overwide-size) / 2);
-}
-
-// @property が使える環境であればコンテナのさらに親要素の幅を参照できるので、containerを1段階飛び出せる。
-// cqw を算出値で保持するために登録済みカスタムプロパティとして定義
-@property --overwide-size {
-	syntax: '<length-percentage>';
-	initial-value: 100%;
-	inherits: true;
-}
-// is--container でその時点のサイズをセットする
-.is--container {
-	--overwide-size: 100cqw;
+	max-inline-size: var(--overwideSize, 100vw);
+	margin-inline: calc(50% - var(--overwideSize) / 2);
 }

package/src/scss/utility/_colbox.scss

@@ -1,7 +1,6 @@
 /*
     Note: c,bgc,bdc Prop Class より前で読み込む(優先度を下げる）こと。
 */
-// 優先度的なことを考慮をすると state系列にするより u-- の方がいい
 .u--colbox {
 	--c: var(--c--text);
 	--bgc: var(--c--base-2);

package/src/scss/utility/index.scss

@@ -38,3 +38,10 @@
 	-webkit-background-clip: text !important;
 	background-clip: text !important;
 }
+
+.u--outerR {
+	--inner-bdrs: calc(var(--bdrs, 0px) - var(--p, 0px));
+}
+.u--innerR {
+	border-radius: var(--inner-bdrs);
+}

package/src/scss/layout/__switcher.scss

@@ -1,11 +0,0 @@
-.l--switcher {
-	display: flex;
-	flex-wrap: wrap;
-	// gap: 1rem;
-	--threshold: 480px;
-}
-
-.l--switcher > * {
-	flex-grow: 1;
-	flex-basis: calc((var(--threshold) - 100%) * 9999);
-}

package/src/scss/props/__/__aspect.bkup.scss

@@ -1,36 +0,0 @@
-[class*='-aspect\:'] {
-	aspect-ratio: var(--aspect);
-}
-
-// 2.35：1（cinema）, 16：10 (WXGA)
-.-aspect\:16\/9 {
-	--aspect: 16/9;
-}
-.-aspect\:4\/3 {
-	--aspect: 4/3;
-}
-.-aspect\:3\/2 {
-	--aspect: 3/2;
-}
-.-aspect\:2\/1 {
-	--aspect: 2/1;
-}
-.-aspect\:1\/1 {
-	--aspect: 1/1;
-}
-
-.-aspect\:golden {
-	--aspect: 16.18/10;
-}
-.-aspect\:silver {
-	--aspect: 14.14/10;
-}
-.-aspect\:bronze {
-	--aspect: 33.03/10;
-}
-.-aspect\:ogp {
-	--aspect: 1.91/1;
-}
-.-aspect\:cinema {
-	--aspect: 2.35/1;
-}

package/src/scss/props/__/__border.bkup.scss

@@ -1,197 +0,0 @@
-// has--border?
-// bdc だけとかの指定でも -bd:出力？
-/*
-	borderはかなり特殊。
-	--bds, --bdw, --bdc で管理できるようにしていて、そのために基本的に .-bd: クラスを使う。
-	各方向も、 -bd:left, -bd:right など。　( -bd: で全方向。)
-
-	.-bd:{preset}: 方向 or ボーダー用のセマンティックプリセット。
-
-	まず bd を指定してもらう。
-	bdc, bdw などを追加で指定。
-
-*/
-
-// hasBorder?
-// .has--border {
-// 	--bds: solid;
-// 	--bdw: 1px;
-// 	--bdc: currentColor; //var(--base-3);
-// 	--bd: var(--bdw) var(--bds) var(--bdc);
-// }
-
-// hasBorder
-
-// .-bd\:→all
-
-// bdc, bdw などでカラーや太さを上書きできるように border 自体を変数管理
-
-// :where( .-bd\:, .-bdl\:, .-bdr\:, .-bdt\:, .-bdb\:, .-bdx\:, .-bdy\:, .-bdis\:, .-bdbs\:, .-bdie\:, .-bdbe\: )
-:where([class*='-bd:']) {
-	--bds: solid;
-	--bdw: 1px;
-	--bdc: currentColor; //var(--base-3);
-	--bd: var(--bdw) var(--bds) var(--bdc);
-}
-
-// 使用される環境（resetCSS）によって挙動が変わりやすいので 各プロパティを変数で管理する。
-// ブラウザのデフォルト挙動では、bds指定でborder出現してくるが、nextraのresetCSSみたいな特殊な環境だとbdwの指定でborderでてきたりする。
-.-bd\: {
-	// --bd: var(--bdw) var(--bds) var(--bdc);
-	border: var(--bd);
-}
-
-// --------------------
-// bd:presets
-// --------------------
-.-bd\:emphasis {
-	--bds: double;
-	--bdw: 5px;
-	border: var(--bd);
-	// border: 5px double currentColor;
-}
-.-bd\:guide {
-	--bds: dashed;
-	--bdc: rgba(90, 165, 172, 0.4);
-	border: var(--bd);
-	// border: 1px dashed rgba(160, 160, 160, 0.4);
-}
-
-// style固定での初期プリセット的なやつ?
-// .-bd\:solid{--bd: 1px solid var(--c--border)}
-// .-bd\:dashed{--bd: 1px dashed var(--c--border)}
-
-// --------------------
-// 方向指定
-// --------------------
-
-// 方向を分けて使用する場合、 bdw, bdc, bds と併用してもらう？
-// bd='l', bd='l,r',bd='t,b',...コンマ区切り→成分指定
-
-// 一方向のみborderを出現させたい時
-.-bd\:l {
-	border-left: var(--bd);
-}
-.-bd\:r {
-	border-right: var(--bd);
-}
-.-bd\:t {
-	border-top: var(--bd);
-}
-.-bd\:b {
-	border-bottom: var(--bd);
-}
-.-bd\:is {
-	border-inline-start: var(--bd);
-}
-.-bd\:bs {
-	border-block-start: var(--bd);
-}
-// inline-startとかは？
-.-bd\:x {
-	border-inline: var(--bd);
-}
-.-bd\:y {
-	border-block: var(--bd);
-}
-
-// bd, bdl, bdr,...
-// .-bdl{}
-// .-bdl {
-// 	border-left: var(--bd);
-// }
-// .-bdl\: {
-// 	border-left: var(--bdl);
-// }
-// .-bdr\:{border-right: var(--bdr);}
-// .-bdt\:{border-top: var(--bdt);}
-// .-bdb\:{border-bottom: var(--bdb);}
-
-.-bdl\:n {
-	border-left: none;
-}
-.-bdr\:n {
-	border-right: none;
-}
-.-bdt\:n {
-	border-top: none;
-}
-.-bdb\:n {
-	border-bottom: none;
-}
-.-bdis\:n {
-	border-inline-start: none;
-}
-.-bdbs\:n {
-	border-block-start: none;
-}
-.-bdie\:n {
-	border-inline-end: none;
-}
-.-bdbe\:n {
-	border-block-end: none;
-}
-
-// bdw="1px 1px 0 0" とかでも指定できる
-// .-bdw\:{border-width: var(--bdw);}
-// .-bdw\:1{--bdw: 1px;}
-
-// thin, medium, thick?
-// .-bdw\:medium{--bdw: var(--bdw--medium)}
-
-// .-bdc\:{border-color: var(--bdc);}
-
-// .-bdc\: {}
-// .-bdc\:i {
-// 	--bdc: inherit;
-// }
-.-bdc\:main {
-	--bdc: var(--main);
-}
-// .-bdc\:accent {
-// 	--bdc: var(--accent);
-// }
-
-// 10,20?
-
-// .-bdc\:strong {
-//--bdc: var(--bdc--strong);
-// }
-
-// bdc:0
-.-bdc\:t {
-	--bdc: transparent;
-}
-// .-bdc\:divider {
-// 	--bdc: var(--bdc--divider);
-// }
-.-bdc\:table {
-	--bdc: var(--table-bdc);
-}
-// .-bdc\:white {
-// 	--bdc: var(--white);
-// }
-// .-bdc\:black {
-// 	--bdc: var(--black);
-// }
-
-// border-style使うと全方向にborder出てくることに注意。
-// bds→ --bdsのみ出力。 borderStyle→border-style出力
-// .-bds\:{border-style: var(--bds);}
-
-// .-bds\:n{border-style:none;}
-// .-bds\:h{border-style:hidden;}
-.-bds\:dt {
-	--bds: dotted;
-}
-.-bds\:ds {
-	--bds: dashed;
-}
-.-bds\:s {
-	--bds: solid;
-}
-.-bds\:db {
-	--bds: double;
-}
-
-// bds,borderSolidで挙動変える？

package/src/scss/props/__/__color.bkup.scss

@@ -1,67 +0,0 @@
-/* stylelint-disable */
-
-//カラー系
-[class*='-c:'] { color: var(--c) !important }
-.-c\:main { --c: var(--main) }
-// .-c\:accent { --c: var(--accent) }
-.-c\:content { --c: var(--content) }
-.-c\:content-2 { --c: var(--content-2) }
-.-c\:content-3 { --c: var(--content-3) }
-.-c\:base { --c: var(--base) }
-// .-c\:base-2 { --c: var(--base-2) }
-// .-c\:base-3 { --c: var(--base-3) }
-
-// .-c\:pale { --c: green; }
-// .-c\:opposite { --c: var(--c--opposite); }
-
-
-// .-c\:current{--c: currentColor;}
-
-[class*='-bgc:'] {background-color: var(--bgc) !important}
-.-bgc\:base { --bgc: var(--base) }
-.-bgc\:base-2 { --bgc: var(--base-2) }
-.-bgc\:base-3 { --bgc: var(--base-3) }
-.-bgc\:content { --bgc: var(--content) }
-.-bgc\:main {--bgc: var(--main);}
-// // .-bgc\:accent {--bgc: var(--accent);}
-.-bgc\:t {--bgc: transparent;}
-
-// .-bgc\:pale {--bgc: red;}
-// .-bgc\:opposite {--bgc: var(--bgc--opposite)}
-// .-bgc\:i {
-// 	--bgc: inherit;
-// }
-
-
-
-// .-keycolor\:main { --keycolor: var(--main) }
-// .-keycolor\:accent { --keycolor: var(--accent) }
-// .-keycolor\:gray { --keycolor: var(--gray) }
-// .-keycolor\:red { --keycolor: var(--red) }
-// .-keycolor\:orange { --keycolor: var(--orange) }
-// .-keycolor\:yellow { --keycolor: var(--yellow) }
-// .-keycolor\:green { --keycolor: var(--green) }
-// .-keycolor\:blue { --keycolor: var(--blue) }
-// .-keycolor\:purple { --keycolor: var(--purple) }
-// .-keycolor\:pink { --keycolor: var(--pink) }
-
-// ミックスkカラーutility
-// @supports (color: color-mix(in srgb, #000, #fff)) {
-.-c\:mix {
-	--c-mixbase: var(--content);
-	// --c-mixcolor: var(--keycolor);
-	--c-mixper: var(--cbox-mixper--txt);
-	--c: color-mix(in srgb, var(--c-mixbase), var(--c-mixcolor) var(--c-mixper));
-}
-.-bgc\:mix {
-	--bgc-mixbase: transparent;
-	// --bgc-mixcolor: var(--keycolor);
-	--bgc-mixper: var(--cbox-mixper--bg);
-	--bgc: color-mix(in srgb, var(--bgc-mixbase), var(--bgc-mixcolor) var(--bgc-mixper));
-}
-.-bdc\:mix {
-	--bdc-mixbase: transparent;
-	// --bdc-mixcolor: var(--keycolor);
-	--bdc-mixper: var(--cbox-mixper--bdc);
-	--bdc: color-mix(in srgb, var(--bdc-mixbase), var(--bdc-mixcolor) var(--bdc-mixper));
-}

package/src/scss/props/__/__display.bukup.scss

@@ -1,11 +0,0 @@
-/* stylelint-disable */
-
-.-d\:{display: var(--d) !important;}
-.-d\:n{display: none !important;}
-.-d\:b{display: block !important;}
-.-d\:f{display: flex !important;}
-.-d\:g{display: grid !important;}
-.-d\:i{ display: inline !important; }
-.-d\:if{ display: inline-flex !important; }
-.-d\:ig{ display: inline-grid !important; }
-.-d\:ib{ display: inline-block !important; }

package/src/scss/props/__/__flex-props.bkup.scss

@@ -1,66 +0,0 @@
-@use '../query' as query;
-
-/* stylelint-disable */
-// .-ord\:1 { order: 1 }
-// .-ord\:0 { order: 0 }
-// .-ord\:-1 { order: -1 }
-
-// fxf flex-flow: row wrap;
-// .-fxf\: {
-// 	// --fxw: nowrap;// --fxd: row;// --fxf: var(--fxd) var(--fxw);
-// 	flex-flow: var(--fxf);
-// }
-
-
-// l--flex or fxf の 専用プロパティ。
-
-// flex-wrap
-// .-fxw\: { flex-wrap: var(--fxw) }
-.-fxw\:w { flex-wrap: wrap }
-// .-fxw\:nw { flex-wrap: nowrap } // default
-
-// flex-direction
-// .-fxd\: { flex-direction: var(--fxd) }
-.-fxd\:c { flex-direction: column }
-.-fxd\:cr { flex-direction: column-reverse }
-.-fxd\:r { flex-direction: row }
-.-fxd\:rr { flex-direction: row-reverse }
-
-
-// is--flexItem?
-.-fx\:{ flex: var(--fx)}
-.-fx\:1{ flex: 1 }
-
-.-fxsh\: { flex-shrink: var(--fxsh) }
-.-fxsh\:0 { flex-shrink: 0 }
-// .-fxsh\:1 { flex-shrink: 1 }
-
-.-fxg\: { flex-grow: var(--fxg) }
-.-fxg\:1 { flex-grow: 1 }
-// .-fxg\:0 { flex-grow: 0 }
-
-.-fxb\: { flex-basis: var(--fxb) }
-// .-fxb\:100 {flex-basis:100%}
-// .-fxb\:a {flex-basis:auto}
-
-// fxw, fxb は調整したいことも多いのでデフォルトでBP対応。
-// 検討: 一括指定の fx, fxf だけ用意しておけばとりあえず全部対応できるのでは？（不要な上書きが発生しまうデメリットあり）
-@include query.bp-up('sm') {
-	// .-fxf\@sm { flex-flow: var(--fxf--sm); }
-	.-fxw\@sm { flex-wrap: var(--fxw--sm); }
-	// .-fxd\@sm { flex-direction: var(--fxd--sm); }
-	
-	// .-fx\@sm{ flex: var(--fx--sm)}
-	.-fxb\@sm { flex-basis: var(--fxb--sm); }
-	// .-fxg\@sm { flex-grow: var(--fxg--sm); }
-	// .-fxsh\@sm { flex-shrink: var(--fxsh--sm); }
-	
-}
-@include query.bp-up('md') {
-	.-fxw\@md { flex-wrap: var(--fxw--md); }
-	.-fxb\@md { flex-basis: var(--fxb--md); }
-}
-@include query.bp-up('lg') {
-	.-fxw\@lg { flex-wrap: var(--fxw--lg); }
-	.-fxb\@lg { flex-basis: var(--fxb--lg); }
-}

package/src/scss/props/__/__gap.bkup.scss

@@ -1,18 +0,0 @@
-@use '../setting' as setting;
-
-/* stylelint-disable */
-
-// [class*='-gap:'] {gap: var(--gap);}
-.-gap\: {gap: var(--colg);}
-.-colg\: {column-gap: var(--colg);}
-.-rowg\: {row-gap: var(--rowg);}
-
-.-gap\:0 {--gap: 0;}
-
-@each $s in setting.$util_spaces {
-	.-gap\:#{$s} {gap: var(--s--#{$s});}
-}
-
-@each $em in setting.$util_em_tokens {
-	.-gap\:em#{$em} {gap: var(--em--#{$em});}
-}

package/src/scss/props/__/__grid-props.bkup.scss

@@ -1,158 +0,0 @@
-@use '../query' as query;
-
-/* stylelint-disable */
-
-/*
-gtc, gtr, gta は、l--grid では変数で受け取る
-
-
-parent側のBP対応: → 今はgtc, gtr, gtaのみ。 gtもいるか...?
-item側: row/column だけ BP対応。（areaは親側でエリアを組み替えればOK、かつ、row/columnにもエリア名を指定できるので不要と判断。)
-*/
-
-// --------------------
-// grid
-// --------------------
-
-// --------------------
-// grid-template (l--grid で定義している)
-// --------------------
-// [dir='rtl'] での上書きを変数でできるので grid ではなく、gt でやっている。
-.-gt\: { grid-template: var(--gt); }
-.-gt\:side\:s, .-gt\:side\:l { grid-template: 'side .' / auto 1fr; }
-.-gt\:side\:e, .-gt\:side\:r { grid-template: '. side' / 1fr auto; }
-// l--grid--2col? → l--sidSwap でできるのでは
-
-// center が広がるタイプの 3列/3行レイアウト
-// .-gt\:3row { grid-template: 'start' 'center' 1fr 'end' / 100%}
-// .-gt\:3col { grid-template: 'start center end' / auto 1fr auto; }
-
-// --------------------
-// grid-template-props
-// --------------------
-.-gta\: { grid-template-areas: var(--gta); }
-.-gtc\: { grid-template-columns: var(--gtc); }
-.-gtr\: { grid-template-rows: var(--gtr); }
-
-
-// .-gta\:3col\:ltr,
-// .-gta\:3col {grid-template-areas: 'start center end';}
-// .-gta\:3row {grid-template-areas: 'start' 'center' 'end';}
-
-// .-gtc\:a1a { grid-template-columns: auto 1fr auto }
-// .-gtr\:a1a { grid-template-rows: auto 1fr auto }
-
-// --------------------
-// grid-auto-
-// -------------------- 
-// .-gaf\: { grid-auto-flow: var(--gaf); }
-// default: row
-// .-gaf\:rd { grid-auto-flow: row dense; }
-// .-gaf\:c { grid-auto-flow: column; }
-// .-gaf\:cd { grid-auto-flow: column dense; }
-
-// styleでいいか？
-// .-gac\: { grid-auto-columns: var(--gac); }
-// .-gar\: { grid-auto-rows: var(--gar); }
-
-
-// --------------------
-// grid-item系
-// --------------------
-// bpサポートあるので変数
-.-ga\:{ grid-area: var(--ga) }
-.-ga\:side {grid-area: side;}
-.-ga\:s{ grid-area: start; }
-.-ga\:e{ grid-area: end; }
-.-ga\:c{ grid-area: center; }
-// .-ga\:fix{ grid-area: fix; }
-// .-ga\:l{ grid-area: left; }
-// .-ga\:r{ grid-area: right; }
-// .-ga\:t{ grid-area: top; }
-// .-ga\:b{ grid-area: bottom; }
-
-// start
-// end
-// .-ga\:head{--ga: head; }
-// .-ga\:foot{--ga: foot; }
-// .-ga\:body{--ga: body; }
-
-// :where(.-gr\:){--grs: auto;--gre: auto;}
-// .-gr\:{ grid-row: var(--grs) / var(--gre) }
-
-// grid-row
-// :where(.-gr\:){
-// 	--grs: auto;
-// 	--gre: auto;
-// 	--gr: var(--grs) / var(--gre);
-// }
-// .-gr\:{
-// 	grid-row: var(--gr);
-// }
-// .-grs\:-1{ --grs: -1 }
-// .-grs\:1{ --grs: 1 }
-// .-grs\:2{ --grs: 2 }
-// .-grs\:3{ --grs: 3 }
-// .-gre\:-1{ --gre: -1 }
-
-
-// grid-row
-// memo: grsで開始位置、greで終了位置を指定する。gre側のspanが使えるような設計にする。
-// 最後から 2つ → grid-row: span 2 / -1
-
-.-gr\:{ grid-row: var(--gr) } // [class*="-gr:"]{ grid-row: var(--gr); }
-.-gr\:span2{ grid-row: span 2 / span 2 }
-.-gr\:full{ grid-row: 1 / -1 }
-.-gr\:1{ grid-row: 1 }
-.-gr\:2{ grid-row: 2 }
-.-gr\:3{ grid-row: 3 }
-
-// .-grs\:1{ grid-row-start: 1 }
-// .-grs\:2{ grid-row-start: 2 }
-// .-grs\:3{ grid-row-start: 3 }
-
-.-gre\:-1{ grid-row-end: -1 }
-// .-gre\:span2{ grid-row-end: span 2}
-
-
-// grid-column
-// [class*="-gc:"]{ grid-column: var(--gc); }
-.-gc\:{ grid-column: var(--gc) }
-.-gc\:span2{ grid-column: span 2 / span 2 }
-.-gr\:full{ grid-column: 1 / -1 }
-.-gc\:1{ grid-column: 1 }
-.-gc\:2{ grid-column: 2 }
-.-gc\:3{ grid-column: 3 }
-.-gce\:-1{ grid-column-end: -1 }
-
-
-// -gt:@sm:, -gt:@sm 
-
-
-// gt@sm すると　全部上書きしてしまう.--gtc, --gt をわけて使うならgtは使わないようにする必要がある。
-// gtc 変える なら gtr も変えることがほとんどだろうから、gt でやってもらう? → RatioGridはgtcのみでコントロールしているので必要。
-// ただし、gta は独立して管理できるようにする。
-@include query.bp-up('sm') {
-	.-gt\@sm { grid-template: var(--gt--sm) }
-	.-gta\@sm { grid-template-areas: var(--gta--sm) }
-	.-gtc\@sm { grid-template-columns: var(--gtc--sm) }
-	.-gtr\@sm { grid-template-rows: var(--gtr--sm) }
-	.-gc\@sm { grid-column: var(--gc--sm) }
-	.-gr\@sm { grid-row: var(--gr--sm) }
-}
-@include query.bp-up('md') {
-	.-gt\@md { grid-template: var(--gt--md) }
-	.-gta\@md { grid-template-areas: var(--gta--md) }
-	.-gtc\@md { grid-template-columns: var(--gtc--md) }
-	.-gtr\@md { grid-template-rows: var(--gtr--md) }
-	.-gc\@md { grid-column: var(--gc--md) }
-	.-gr\@md { grid-row: var(--gr--md) }
-}
-@include query.bp-up('lg') {
-	.-gt\@lg { grid-template: var(--gt--lg) }
-	.-gta\@lg { grid-template-areas: var(--gta--lg) }
-	.-gtc\@lg { grid-template-columns: var(--gtc--lg) }
-	.-gtr\@lg { grid-template-rows: var(--gtr--lg) }
-	.-gc\@lg { grid-column: var(--gc--lg) }
-	.-gr\@lg { grid-row: var(--gr--lg) }
-}