@duetds/components 9.0.1 → 9.1.0

package/lib/collection/components/duet-grid/duet-grid.css

@@ -7,7 +7,6 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
-  container-type: inline-size;
 }
 
 :host(.duet-grid-variation-flex) {
@@ -19,270 +18,335 @@
   max-width: 100%;
   height: auto;
 }
-:host(.duet-grid-variation-flex).duet-grid-breakpoint-x-small {
+
+:host(.duet-grid-variation-flex.duet-grid-breakpoint-x-small) {
   flex-direction: row !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-breakpoint-x-small.duet-grid-row-reverse {
-  flex-direction: row-reverse !important;
-}
 @media (max-width: 22.5em) {
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-x-small {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-x-small) {
     flex-direction: column !important;
   }
 }
+
+:host(.duet-grid-variation-flex.duet-grid-breakpoint-x-small.duet-grid-row-reverse) {
+  flex-direction: row-reverse !important;
+}
+
 @media (min-width: 36em) {
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-small {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-small) {
     flex-direction: row !important;
   }
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-small.duet-grid-row-reverse {
+}
+
+@media (min-width: 36em) {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-small.duet-grid-row-reverse) {
     flex-direction: row-reverse !important;
   }
 }
+
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-medium {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-medium) {
     flex-direction: row !important;
   }
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-medium.duet-grid-row-reverse {
+}
+
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-medium.duet-grid-row-reverse) {
     flex-direction: row-reverse !important;
   }
 }
+
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-large {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-large) {
     flex-direction: row !important;
   }
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-large.duet-grid-row-reverse {
+}
+
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-large.duet-grid-row-reverse) {
     flex-direction: row-reverse !important;
   }
 }
+
 @media (min-width: 64.0625em) {
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-x-large {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-x-large) {
     flex-direction: row !important;
   }
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-x-large.duet-grid-row-reverse {
+}
+
+@media (min-width: 64.0625em) {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-x-large.duet-grid-row-reverse) {
     flex-direction: row-reverse !important;
   }
 }
-:host(.duet-grid-variation-flex).duet-grid-wrap {
+
+:host(.duet-grid-variation-flex.duet-grid-wrap) {
   flex-wrap: wrap !important;
 }
-:host(.duet-grid-variation-flex).duet-no-stacking {
+
+:host(.duet-grid-variation-flex.duet-no-stacking) {
   flex-direction: row !important;
 }
-:host(.duet-grid-variation-flex).duet-no-stacking.duet-grid-row-reverse {
+
+:host(.duet-grid-variation-flex.duet-no-stacking.duet-grid-row-reverse) {
   flex-direction: row-reverse !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-x-small {
+
+:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small) {
   flex-direction: column !important;
 }
 @media (max-width: 35.9375em) {
-  :host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-x-small {
+  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small) {
     flex-direction: column !important;
   }
 }
-:host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-small {
+
+:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small) {
   flex-direction: column !important;
 }
 @media (min-width: 36em) {
-  :host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-small {
+  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small) {
     flex-direction: column !important;
   }
 }
-:host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-medium {
+
+:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium) {
   flex-direction: column !important;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-medium {
+  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium) {
     flex-direction: column !important;
   }
 }
-:host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-large {
+
+:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large) {
   flex-direction: column !important;
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-large {
+  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large) {
     flex-direction: column !important;
   }
 }
-:host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-x-large {
+
+:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large) {
   flex-direction: column !important;
 }
 @media (min-width: 64.0625em) {
-  :host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-x-large {
+  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large) {
     flex-direction: column !important;
   }
 }
-:host(.duet-grid-variation-flex).duet-grid-align-top.duet-no-stacking {
+
+:host(.duet-grid-variation-flex.duet-grid-align-top.duet-no-stacking) {
   align-items: flex-start !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-align-bottom.duet-no-stacking {
+
+:host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-no-stacking) {
   align-items: flex-end !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-align-center.duet-no-stacking {
+
+:host(.duet-grid-variation-flex.duet-grid-align-center.duet-no-stacking) {
   align-items: center !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-align-stretch.duet-no-stacking {
+
+.duet-grid-align-stretch.duet-no-stacking {
   align-items: stretch !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-align-baseline.duet-no-stacking {
+
+:host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-no-stacking) {
   align-items: baseline !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-align-top.duet-grid-breakpoint-x-small {
+
+:host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-x-small) {
   align-items: flex-start !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-align-bottom.duet-grid-breakpoint-x-small {
+
+:host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-x-small) {
   align-items: flex-end !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-align-center.duet-grid-breakpoint-x-small {
+
+:host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-small) {
   align-items: center !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-align-stretch.duet-grid-breakpoint-x-small {
+
+:host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-small) {
   align-items: stretch !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-align-baseline.duet-grid-breakpoint-x-small {
+
+:host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-small) {
   align-items: baseline !important;
 }
+
 @media (min-width: 36em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-top.duet-grid-breakpoint-small {
+  :host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-small) {
     align-items: flex-start !important;
   }
 }
+
 @media (min-width: 36em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-bottom.duet-grid-breakpoint-small {
+  :host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-small) {
     align-items: flex-end !important;
   }
 }
+
 @media (min-width: 36em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-center.duet-grid-breakpoint-small {
+  :host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-small) {
     align-items: center !important;
   }
 }
+
 @media (min-width: 36em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-stretch.duet-grid-breakpoint-small {
+  :host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-small) {
     align-items: stretch !important;
   }
 }
+
 @media (min-width: 36em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-baseline.duet-grid-breakpoint-small {
+  :host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-small) {
     align-items: baseline !important;
   }
 }
+
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-top.duet-grid-breakpoint-medium {
+  :host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-medium) {
     align-items: flex-start !important;
   }
 }
+
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-bottom.duet-grid-breakpoint-medium {
+  :host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-medium) {
     align-items: flex-end !important;
   }
 }
+
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-center.duet-grid-breakpoint-medium {
+  :host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-medium) {
     align-items: center !important;
   }
 }
+
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-stretch.duet-grid-breakpoint-medium {
+  :host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-medium) {
     align-items: stretch !important;
   }
 }
+
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-baseline.duet-grid-breakpoint-medium {
+  :host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-medium) {
     align-items: baseline !important;
   }
 }
+
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-top.duet-grid-breakpoint-large {
+  :host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-large) {
     align-items: flex-start !important;
   }
 }
+
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-bottom.duet-grid-breakpoint-large {
+  :host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-large) {
     align-items: flex-end !important;
   }
 }
+
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-center.duet-grid-breakpoint-large {
+  :host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-large) {
     align-items: center !important;
   }
 }
+
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-stretch.duet-grid-breakpoint-large {
+  :host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-large) {
     align-items: stretch !important;
   }
 }
+
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-baseline.duet-grid-breakpoint-large {
+  :host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-large) {
     align-items: baseline !important;
   }
 }
+
 @media (min-width: 64.0625em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-top.duet-grid-breakpoint-x-large {
+  :host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-x-large) {
     align-items: flex-start !important;
   }
 }
+
 @media (min-width: 64.0625em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-bottom.duet-grid-breakpoint-x-large {
+  :host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-x-large) {
     align-items: flex-end !important;
   }
 }
+
 @media (min-width: 64.0625em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-center.duet-grid-breakpoint-x-large {
+  :host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-large) {
     align-items: center !important;
   }
 }
+
 @media (min-width: 64.0625em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-stretch.duet-grid-breakpoint-x-large {
+  :host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-large) {
     align-items: stretch !important;
   }
 }
+
 @media (min-width: 64.0625em) {
-  :host(.duet-grid-variation-flex).duet-grid-align-baseline.duet-grid-breakpoint-x-large {
+  :host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-large) {
     align-items: baseline !important;
   }
 }
-:host(.duet-grid-variation-flex).duet-grid-distribution-left {
+
+:host(.duet-grid-variation-flex.duet-grid-distribution-left) {
   justify-content: flex-start !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-distribution-right {
+
+:host(.duet-grid-variation-flex.duet-grid-distribution-right) {
   justify-content: flex-end !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-distribution-center {
+
+:host(.duet-grid-variation-flex.duet-grid-distribution-center) {
   justify-content: center !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-distribution-between {
+
+:host(.duet-grid-variation-flex.duet-grid-distribution-between) {
   justify-content: space-between !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-distribution-around {
+
+:host(.duet-grid-variation-flex.duet-grid-distribution-around) {
   justify-content: space-around !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-distribution-evenly {
+
+:host(.duet-grid-variation-flex.duet-grid-distribution-evenly) {
   justify-content: space-evenly !important;
 }
+
 @media (max-width: 35.9375em) {
-  :host(.duet-grid-variation-flex).duet-grid-mobile-left {
+  :host(.duet-grid-variation-flex.duet-grid-mobile-left) {
     align-items: flex-start !important;
     justify-content: flex-start !important;
     text-align: left !important;
   }
 }
+
 @media (max-width: 35.9375em) {
-  :host(.duet-grid-variation-flex).duet-grid-mobile-center {
+  :host(.duet-grid-variation-flex.duet-grid-mobile-center) {
     align-items: center !important;
     justify-content: center !important;
     text-align: center !important;
   }
-  :host(.duet-grid-variation-flex).duet-grid-mobile-center * {
+  :host(.duet-grid-variation-flex.duet-grid-mobile-center) * {
     text-align: center !important;
   }
 }
+
 @media (max-width: 35.9375em) {
-  :host(.duet-grid-variation-flex).duet-grid-mobile-right {
+  :host(.duet-grid-variation-flex.duet-grid-mobile-right) {
     align-items: flex-end !important;
     justify-content: flex-end !important;
     text-align: right !important;
   }
-  :host(.duet-grid-variation-flex).duet-grid-mobile-right * {
+  :host(.duet-grid-variation-flex.duet-grid-mobile-right) * {
     text-align: right !important;
   }
 }
@@ -295,6 +359,7 @@
   align-items: flex-start;
   justify-content: center;
   margin: 0 20px;
+  container-type: inline-size;
 }
 @media (min-width: 36em) {
   :host(.duet-grid-variation-grid) {
@@ -322,163 +387,171 @@
     margin: 0 auto;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-small::slotted(*) {
+
+:host(.duet-grid-variation-grid.duet-grid-template-small) ::slotted(*) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-small::slotted(*) {
+  :host(.duet-grid-variation-grid.duet-grid-template-small) ::slotted(*) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-small::slotted(*) {
+  :host(.duet-grid-variation-grid.duet-grid-template-small) ::slotted(*) {
     grid-column: 3/span 8;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-medium::slotted(*) {
+
+:host(.duet-grid-variation-grid.duet-grid-template-medium) ::slotted(*) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-medium::slotted(*) {
+  :host(.duet-grid-variation-grid.duet-grid-template-medium) ::slotted(*) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-medium::slotted(*) {
+  :host(.duet-grid-variation-grid.duet-grid-template-medium) ::slotted(*) {
     grid-column: 2/span 10;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-large::slotted(*) {
+
+:host(.duet-grid-variation-grid.duet-grid-template-large) ::slotted(*) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-large::slotted(*) {
+  :host(.duet-grid-variation-grid.duet-grid-template-large) ::slotted(*) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-large::slotted(*) {
+  :host(.duet-grid-variation-grid.duet-grid-template-large) ::slotted(*) {
     grid-column: 1/span 12;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(odd)) {
+
+:host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(odd)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(odd)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(odd)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(odd)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(odd)) {
     grid-column: 1/span 8;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(even)) {
+:host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(even)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(even)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(even)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(even)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(even)) {
     grid-column: 9/span 4;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(odd)) {
+
+:host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(odd)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(odd)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(odd)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(odd)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(odd)) {
     grid-column: 1/span 4;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(even)) {
+:host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(even)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(even)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(even)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(even)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(even)) {
     grid-column: 5/span 8;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(odd)) {
+
+:host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(odd)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(odd)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(odd)) {
     grid-column: 1/span 4;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(odd)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(odd)) {
     grid-column: 1/span 6;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(even)) {
+:host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(even)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(even)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(even)) {
     grid-column: 5/span 4;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(even)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(even)) {
     grid-column: 7/span 6;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+1)) {
+
+:host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+1)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+1)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+1)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+1)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+1)) {
     grid-column: 1/span 4;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+2)) {
+:host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+2)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+2)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+2)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+2)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+2)) {
     grid-column: 5/span 4;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+3)) {
+:host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+3)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+3)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+3)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+3)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+3)) {
     grid-column: 9/span 4;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-button-grid {
+
+:host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   margin: 0;
@@ -486,18 +559,18 @@
   /* stylelint-disable */
 }
 @media (min-width: 36em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-button-grid {
+  :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
     gap: 16px;
   }
 }
 @container (min-width: 664px) {
-  :host(.duet-grid-variation-grid).duet-grid-template-button-grid {
+  :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
     /* stylelint-enable */
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 @container (min-width: 1100px) {
-  :host(.duet-grid-variation-grid).duet-grid-template-button-grid {
+  :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
     /* stylelint-enable */
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }