@ebrains/components 0.4.0-alpha.0 → 0.6.0-alpha.0

package/dist/components/components.css

@@ -1000,10 +1000,37 @@ video {
   grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
   grid-gap: var(--inner-gutter);
 }
+.grid-col-span-2 {
+  --container-grid-columns: 2;
+  grid-column: span 2 / span 2;
+}
+.grid-col-span-3 {
+  --container-grid-columns: 3;
+  grid-column: span 3 / span 3;
+}
+.grid-col-span-4 {
+  --container-grid-columns: 4;
+  grid-column: span 4 / span 4;
+}
+.grid-col-span-6 {
+  --container-grid-columns: 6;
+  grid-column: span 6 / span 6;
+}
+.grid-col-span-8 {
+  --container-grid-columns: 8;
+  grid-column: span 8 / span 8;
+}
+.grid-col-span-10 {
+  --container-grid-columns: 10;
+  grid-column: span 10 / span 10;
+}
 .grid-col-span-12 {
   --container-grid-columns: 12;
   grid-column: span 12 / span 12;
 }
+.grid-col-start-2 {
+  grid-column-start: 2;
+}
 [class*="grid-line-"] > * {
   position: relative;
 }
@@ -1013,6 +1040,396 @@ video {
   z-index: 0;
   pointer-events: none;
 }
+.grid-cols-1[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-1[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+}
+.grid-cols-1[class*="grid-line-x"] > *:nth-child(1n+1)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-1[class*="grid-line-x"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-1[class*="grid-line-x"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-2[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-2[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+2)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(2n+2)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+2)::after {
+  top: 0;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {
+  bottom: 0;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-3[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-3[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-3[class*="grid-line-x"] > *:nth-child(3n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-3[class*="grid-line-x"] > *:nth-child(3n+3)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-3[class*="grid-line-x"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-3[class*="grid-line-x"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(3n+3)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+3)::after {
+  top: 0;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {
+  bottom: 0;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-4[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-4[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+4)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+4)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+4)::after {
+  top: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {
+  bottom: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-5[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-5[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+5)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(5n+5)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+5)::after {
+  top: 0;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {
+  bottom: 0;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-6[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-6[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-6[class*="grid-line-x"] > *:nth-child(6n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-6[class*="grid-line-x"] > *:nth-child(6n+6)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-6[class*="grid-line-x"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-6[class*="grid-line-x"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(6n+6)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+6)::after {
+  top: 0;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {
+  bottom: 0;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-7[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-7[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-7[class*="grid-line-x"] > *:nth-child(7n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-7[class*="grid-line-x"] > *:nth-child(7n+7)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-7[class*="grid-line-x"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-7[class*="grid-line-x"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(7n+7)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+7)::after {
+  top: 0;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {
+  bottom: 0;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-8[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-8[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-8[class*="grid-line-x"] > *:nth-child(8n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-8[class*="grid-line-x"] > *:nth-child(8n+8)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-8[class*="grid-line-x"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-8[class*="grid-line-x"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(8n+8)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+8)::after {
+  top: 0;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {
+  bottom: 0;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-9[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-9[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-9[class*="grid-line-x"] > *:nth-child(9n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-9[class*="grid-line-x"] > *:nth-child(9n+9)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-9[class*="grid-line-x"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-9[class*="grid-line-x"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(9n+9)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+9)::after {
+  top: 0;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {
+  bottom: 0;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-10[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-10[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-10[class*="grid-line-x"] > *:nth-child(10n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-10[class*="grid-line-x"] > *:nth-child(10n+10)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-10[class*="grid-line-x"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-10[class*="grid-line-x"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(10n+10)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+10)::after {
+  top: 0;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {
+  bottom: 0;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-11[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-11[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+11)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(11n+11)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+11)::after {
+  top: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {
+  bottom: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-12[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-12[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-12[class*="grid-line-x"] > *:nth-child(12n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-12[class*="grid-line-x"] > *:nth-child(12n+12)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-12[class*="grid-line-x"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-12[class*="grid-line-x"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(12n+12)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+12)::after {
+  top: 0;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {
+  bottom: 0;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {
+  bottom: 0;
+}
 @media (min-width: 750px) {
   [class*="grid-line-"] > * {
     position: relative;
@@ -5331,6 +5748,33 @@ video {
 .cols-container > .ml-0 {
   margin-left: 0;
 }
+.w-4-cols {
+  width: calc(((4 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (4 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
+}
+.cols-container > .w-4-cols {
+  width: calc(((4 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (4 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
+}
+.w-4-cols > * {
+  --container-grid-columns: 4;
+}
+.w-6-cols {
+  width: calc(((6 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (6 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
+}
+.cols-container > .w-6-cols {
+  width: calc(((6 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (6 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
+}
+.w-6-cols > * {
+  --container-grid-columns: 6;
+}
+.w-8-cols {
+  width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
+}
+.cols-container > .w-8-cols {
+  width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
+}
+.w-8-cols > * {
+  --container-grid-columns: 8;
+}
 .w-12-cols {
   width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
 }
@@ -5664,6 +6108,24 @@ input[type="range"]::-webkit-slider-thumb {
       background-size: 16px 16px;
     }
   }
+.effect-bg-behind {
+  position: relative;
+}
+.effect-bg-behind::before {
+  position: absolute;
+  inset: 0rem;
+  z-index: -1;
+  --tw-content: '';
+  content: var(--tw-content);
+}
+.effect-bg-behind {
+
+    &:before {
+      background-size: calc(100% + 6px) calc(100% + 6px) !important;
+      background-position: -4px -4px !important;
+      background-repeat: no-repeat !important;
+    }
+  }
 .effect-bg-behind-link {
   position: relative;
 }
@@ -6026,6 +6488,9 @@ input[type="range"]::-webkit-slider-thumb {
 .h-8 {
   height: 0.5rem;
 }
+.h-80 {
+  height: 5rem;
+}
 .h-96 {
   height: 6rem;
 }
@@ -6155,6 +6620,42 @@ input[type="range"]::-webkit-slider-thumb {
 .resize {
   resize: both;
 }
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.grid-cols-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+.grid-cols-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+.grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+.grid-cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+.grid-cols-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
 .flex-row {
   flex-direction: row;
 }
@@ -6475,6 +6976,9 @@ input[type="range"]::-webkit-slider-thumb {
 .p-16 {
   padding: 1rem;
 }
+.p-2 {
+  padding: 0.125rem;
+}
 .p-20 {
   padding: 1.25rem;
 }
@@ -6844,6 +7348,12 @@ input[type="range"]::-webkit-slider-thumb {
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.before\:effect-opacity::before {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
 @media (min-width: 750px) {
   .md\:grid-col-span-4 {
     --container-grid-columns: 4;
@@ -6853,6 +7363,40 @@ input[type="range"]::-webkit-slider-thumb {
     --container-grid-columns: 6;
     grid-column: span 6 / span 6;
   }
+  .md\:grid-cols-4[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+    border-bottom-width: 1px;
+  }
+  .md\:grid-cols-4[class*="grid-line-xfull"] > *:nth-child(n)::before {
+    inset-inline-start: calc(var(--inner-gutter) / -2);
+    inset-inline-end: calc(var(--inner-gutter) / -2);
+  }
+  .md\:grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1)::before {
+    inset-inline-start: 0;
+  }
+  .md\:grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+4)::before {
+    inset-inline-end: 0;
+  }
+  .md\:grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {
+    border-bottom-width: 0;
+  }
+  .md\:grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {
+    border-bottom-width: 0;
+  }
+  .md\:grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+    border-inline-end-width: 1px;
+  }
+  .md\:grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+4)::after {
+    border-inline-end-width: 0;
+  }
+  .md\:grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+4)::after {
+    top: 0;
+  }
+  .md\:grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {
+    bottom: 0;
+  }
+  .md\:grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {
+    bottom: 0;
+  }
   .md\:w-10-cols {
     width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
   }
@@ -7116,6 +7660,30 @@ input[type="range"]::-webkit-slider-thumb {
 .before\:bg-gradient-y::before {
     background: linear-gradient(to bottom, transparent, ease-in-out, black);
   }
+.before\:bg-gradient-01-top::before {
+    background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-01-bottom::before {
+    background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-02-top::before {
+    background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-02-bottom::before {
+    background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-03-top::before {
+    background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-03-bottom::before {
+    background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-04-top::before {
+    background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-04-bottom::before {
+    background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);
+  }
 .hover\:before\:opacity-100:hover::before {
   opacity: 1;
 }
@@ -7159,6 +7727,9 @@ input[type="range"]::-webkit-slider-thumb {
     --tw-translate-y: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
   .md\:gap-y-12 {
     row-gap: 0.75rem;
   }