wonder-image 1.2.0

package/src/build/frontend/css/class/function.css

@@ -0,0 +1,316 @@
+/* Box sizing */
+.box-border { box-sizing: border-box !important; }
+.box-content { box-sizing: content-box !important; }
+.box-unset { box-sizing: unset !important; }
+
+/* Overflow */
+.o-hidden { overflow: hidden !important; }
+.o-scroll { overflow: scroll !important; }
+.o-auto { overflow: auto !important; }
+.o-inherit { overflow: inherit !important; }
+
+/* Border */
+.b-0 { border: none !important; }
+.b-1 { border: 1px solid currentColor !important; }
+.b-2 { border: 2px solid currentColor !important; }
+.b-3 { border: 3px solid currentColor !important; }
+
+.bt-0 { border-top: none !important; }
+.bt-1 { border-top: 1px solid currentColor !important; }
+.bt-2 { border-top: 2px solid currentColor !important; }
+.bt-3 { border-top: 3px solid currentColor !important; }
+
+.br-0 { border-right: none !important; }
+.br-1 { border-right: 1px solid currentColor !important; }
+.br-2 { border-right: 2px solid currentColor !important; }
+.br-3 { border-right: 3px solid currentColor !important; }
+
+.bb-0 { border-bottom: none !important; }
+.bb-1 { border-bottom: 1px solid currentColor !important; }
+.bb-2 { border-bottom: 2px solid currentColor !important; }
+.bb-3 { border-bottom: 3px solid currentColor !important; }
+
+.bl-0 { border-left: none !important; }
+.bl-1 { border-left: 1px solid currentColor !important; }
+.bl-2 { border-left: 2px solid currentColor !important; }
+.bl-3 { border-left: 3px solid currentColor !important; }
+
+.b-shadow-0 { box-shadow: none !important; }
+.b-shadow { box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; }
+
+.b-r { border-radius: 50% !important; }
+.b-r-0 { border-radius: 0px !important; }
+.b-r-1 { border-radius: 1px !important; }
+.b-r-2 { border-radius: 2px !important; }
+.b-r-3 { border-radius: 3px !important; }
+.b-r-4 { border-radius: 4px !important; }
+.b-r-5 { border-radius: 5px !important; }
+.b-r-6 { border-radius: 6px !important; }
+.b-r-7 { border-radius: 7px !important; }
+.b-r-8 { border-radius: 8px !important; }
+.b-r-9 { border-radius: 9px !important; }
+.b-r-10 { border-radius: 10px !important; }
+.b-r-11 { border-radius: 11px !important; }
+.b-r-12 { border-radius: 12px !important; }
+.b-r-13 { border-radius: 13px !important; }
+.b-r-14 { border-radius: 14px !important; }
+.b-r-15 { border-radius: 15px !important; }
+.b-r-16 { border-radius: 16px !important; }
+.b-r-17 { border-radius: 17px !important; }
+.b-r-18 { border-radius: 18px !important; }
+.b-r-19 { border-radius: 19px !important; }
+.b-r-20 { border-radius: 20px !important; }
+.b-r-21 { border-radius: 21px !important; }
+.b-r-22 { border-radius: 22px !important; }
+.b-r-23 { border-radius: 23px !important; }
+.b-r-24 { border-radius: 24px !important; }
+.b-r-25 { border-radius: 25px !important; }
+.b-r-26 { border-radius: 26px !important; }
+.b-r-27 { border-radius: 27px !important; }
+.b-r-28 { border-radius: 28px !important; }
+.b-r-29 { border-radius: 29px !important; }
+.b-r-30 { border-radius: 30px !important; }
+.b-r-31 { border-radius: 31px !important; }
+.b-r-32 { border-radius: 32px !important; }
+.b-r-33 { border-radius: 33px !important; }
+.b-r-34 { border-radius: 34px !important; }
+.b-r-35 { border-radius: 35px !important; }
+.b-r-36 { border-radius: 36px !important; }
+.b-r-37 { border-radius: 37px !important; }
+.b-r-38 { border-radius: 38px !important; }
+.b-r-39 { border-radius: 39px !important; }
+.b-r-40 { border-radius: 40px !important; }
+.b-r-41 { border-radius: 41px !important; }
+.b-r-42 { border-radius: 42px !important; }
+.b-r-43 { border-radius: 43px !important; }
+.b-r-44 { border-radius: 44px !important; }
+.b-r-45 { border-radius: 45px !important; }
+.b-r-46 { border-radius: 46px !important; }
+.b-r-47 { border-radius: 47px !important; }
+.b-r-48 { border-radius: 48px !important; }
+.b-r-49 { border-radius: 49px !important; }
+.b-r-50 { border-radius: 50px !important; }
+
+/* Opacity */
+.o-0 { opacity: 0 !important; }
+.o-5 { opacity: .05 !important; }
+.o-10 { opacity: .1 !important; }
+.o-15 { opacity: .15 !important; }
+.o-20 { opacity: .2 !important; }
+.o-25 { opacity: .25 !important; }
+.o-30 { opacity: .3 !important; }
+.o-35 { opacity: .35 !important; }
+.o-40 { opacity: .4 !important; }
+.o-45 { opacity: .45 !important; }
+.o-50 { opacity: .5 !important; }
+.o-55 { opacity: .55 !important; }
+.o-60 { opacity: .6 !important; }
+.o-65 { opacity: .65 !important; }
+.o-70 { opacity: .7 !important; }
+.o-75 { opacity: .75 !important; }
+.o-80 { opacity: .8 !important; }
+.o-85 { opacity: .85 !important; }
+.o-90 { opacity: .9 !important; }
+.o-95 { opacity: .95 !important; }
+.o-100 { opacity: 1 !important; }
+
+/* Cursor */
+.c-pointer { cursor: pointer !important; }
+.c-copy { cursor: copy !important; }
+.c-auto { cursor: auto !important; }
+.c-lens { cursor: zoom-in !important; }
+
+.unselectable {
+-webkit-touch-callout: none !important;
+-webkit-user-select: none !important;
+-khtml-user-select: none !important;
+-moz-user-select: none !important;
+-ms-user-select: none !important;
+user-select: none !important; 
+}
+.no-scrollbar {
+overscroll-behavior: none !important;
+-ms-overflow-style: none !important;
+scrollbar-width: none !important;
+}
+.no-scrollbar::-webkit-scrollbar { display: none !important; }
+
+.no-interaction { pointer-events: none !important; }
+
+.multiply { mix-blend-mode: multiply !important; }
+.overlay { mix-blend-mode: overlay !important; }
+.greyscale { filter: grayscale(1) !important; }
+
+.blur-1 { 
+-webkit-backdrop-filter: blur(calc(var(--spacer) * 1)) !important; 
+backdrop-filter: blur(calc(var(--spacer) * 1)) !important; 
+}
+.blur-2 { 
+-webkit-backdrop-filter: blur(calc(var(--spacer) * 2)) !important; 
+backdrop-filter: blur(calc(var(--spacer) * 2)) !important; 
+}
+.blur-3 { 
+backdrop-filter: blur(calc(var(--spacer) * 3)) !important; 
+-webkit-backdrop-filter: blur(calc(var(--spacer) * 3)) !important; 
+}
+.blur-4 { 
+backdrop-filter: blur(calc(var(--spacer) * 4)) !important; 
+-webkit-backdrop-filter: blur(calc(var(--spacer) * 4)) !important; 
+}
+.blur-5 { 
+backdrop-filter: blur(calc(var(--spacer) * 5)) !important; 
+-webkit-backdrop-filter: blur(calc(var(--spacer) * 5)) !important; 
+}
+
+/* Background Video */
+video.bg {
+position: absolute;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+min-width: 100%;
+min-height: 100%;
+}
+
+/* Background Image */
+div.bg{
+position: absolute;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+width: 101%;
+height: 101%;
+transition: 1s;
+}
+div.bg-img {
+position: absolute;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+width: 101%;
+height: 101%;
+background-size: cover;
+background-image: var(--default-image);
+background-color: #fff;
+background-position: center;
+background-repeat: no-repeat;
+transition: 1s;
+}
+div.bg-img-f {
+position: absolute;
+top: 0;
+left: 0;
+width: 101%;
+height: 101%;
+background-size: cover;
+background-image: var(--default-image);
+background-color: #fff;
+background-position: center;
+background-repeat: no-repeat;
+background-attachment: fixed;
+}
+img.bg,
+iframe.bg {
+position: absolute;
+top: 50%;
+left: 50%;
+transform: translate(-50%,-50%);
+width: 101%;
+height: 101%;
+}
+
+.bg-cover {
+object-fit: cover !important;
+background-size: cover !important;
+}
+.bg-contain {
+object-fit: contain !important;
+background-size: contain !important;
+}
+.o-center {
+object-position: center !important;
+background-position: center !important;
+}
+.o-top {
+object-position: top !important;
+background-position: top !important;
+}
+.o-right {
+object-position: right !important;
+background-position: right !important;
+}
+.o-bottom {
+object-position: bottom !important;
+background-position: bottom !important;
+}
+.o-left {
+object-position: left !important;
+background-position: left !important;
+}
+
+.skeleton {
+animation: skeleton-loading 1s linear infinite alternate;
+}
+
+@keyframes skeleton-loading {
+0% { background-color: hsl(10, 0%, 85%); }
+100% { background-color: hsl(10, 0%, 95%); }
+}
+@media (max-width: 1000px) {
+.o-t-center {
+object-position: center !important;
+background-position: center !important;
+}
+.o-t-top {
+object-position: top !important;
+background-position: top !important;
+}
+.o-t-right {
+object-position: right !important;
+background-position: right !important;
+}
+.o-t-bottom {
+object-position: bottom !important;
+background-position: bottom !important;
+}
+.o-t-left {
+object-position: left !important;
+background-position: left !important;
+}     
+}
+@media (max-width: 768px) {
+.o-p-center {
+object-position: center !important;
+background-position: center !important;
+}
+.o-p-top {
+object-position: top !important;
+background-position: top !important;
+}
+.o-p-right {
+object-position: right !important;
+background-position: right !important;
+}
+.o-p-bottom {
+object-position: bottom !important;
+background-position: bottom !important;
+}
+.o-p-left {
+object-position: left !important;
+background-position: left !important;
+}
+div.bg-img-f {
+position: absolute;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+width: 101%;
+height: 101%;
+background-size: cover;
+background-image: var(--default-image);
+background-color: #fff;
+background-position: center;
+background-repeat: no-repeat;
+background-attachment: unset;
+}
+}

package/src/build/frontend/css/class/grid.css

@@ -0,0 +1,240 @@
+.d-grid.row-max { grid-auto-rows: max-content !important; }
+.d-grid.row-min { grid-auto-rows: min-content !important; }
+
+.d-flex.row-max { grid-auto-rows: max-content !important; }
+.d-flex.row-min { grid-auto-rows: min-content !important; }
+
+.d-flex.d-column { flex-direction: column !important; }
+.d-flex.d-row { flex-direction: row !important; }
+.d-flex.d-column-reverse { flex-direction: column-reverse !important; }
+.d-flex.d-row-reverse { flex-direction: row-reverse !important; }
+
+.d-grid.col-1 { grid-template-columns: repeat(1, 1fr); }
+.d-grid.col-2 { grid-template-columns: repeat(2, 1fr); }
+.d-grid.col-3 { grid-template-columns: repeat(3, 1fr); }
+.d-grid.col-4 { grid-template-columns: repeat(4, 1fr); }
+.d-grid.col-5 { grid-template-columns: repeat(5, 1fr); }
+.d-grid.col-6 { grid-template-columns: repeat(6, 1fr); }
+.d-grid.col-7 { grid-template-columns: repeat(7, 1fr); }
+.d-grid.col-8 { grid-template-columns: repeat(8, 1fr); }
+.d-grid.col-9 { grid-template-columns: repeat(9, 1fr); }
+.d-grid.col-10 { grid-template-columns: repeat(10, 1fr); }
+.d-grid.col-11 { grid-template-columns: repeat(11, 1fr); }
+.d-grid.col-12 { grid-template-columns: repeat(12, 1fr); }
+
+.d-flex.col-1 { grid-template-columns: repeat(1, 1fr); }
+.d-flex.col-2 { grid-template-columns: repeat(2, 1fr); }
+.d-flex.col-3 { grid-template-columns: repeat(3, 1fr); }
+.d-flex.col-4 { grid-template-columns: repeat(4, 1fr); }
+.d-flex.col-5 { grid-template-columns: repeat(5, 1fr); }
+.d-flex.col-6 { grid-template-columns: repeat(6, 1fr); }
+.d-flex.col-7 { grid-template-columns: repeat(7, 1fr); }
+.d-flex.col-8 { grid-template-columns: repeat(8, 1fr); }
+.d-flex.col-9 { grid-template-columns: repeat(9, 1fr); }
+.d-flex.col-10 { grid-template-columns: repeat(10, 1fr); }
+.d-flex.col-11 { grid-template-columns: repeat(11, 1fr); }
+.d-flex.col-12 { grid-template-columns: repeat(12, 1fr); }
+
+.gap-0 { gap: calc(var(--spacer) * 0); }
+.gap-1 { gap: calc(var(--spacer) * 1); }
+.gap-2 { gap: calc(var(--spacer) * 2); }
+.gap-3 { gap: calc(var(--spacer) * 3); }
+.gap-4 { gap: calc(var(--spacer) * 4); }
+.gap-5 { gap: calc(var(--spacer) * 5); }
+.gap-6 { gap: calc(var(--spacer) * 6); }
+.gap-7 { gap: calc(var(--spacer) * 7); }
+.gap-8 { gap: calc(var(--spacer) * 8); }
+.gap-9 { gap: calc(var(--spacer) * 9); }
+.gap-10 { gap: calc(var(--spacer) * 10); }
+.gap-11 { gap: calc(var(--spacer) * 11); }
+.gap-12 { gap: calc(var(--spacer) * 12); }
+
+.r-gap-0 { row-gap: calc(var(--spacer) * 0); }
+.r-gap-1 { row-gap: calc(var(--spacer) * 1); }
+.r-gap-2 { row-gap: calc(var(--spacer) * 2); }
+.r-gap-3 { row-gap: calc(var(--spacer) * 3); }
+.r-gap-4 { row-gap: calc(var(--spacer) * 4); }
+.r-gap-5 { row-gap: calc(var(--spacer) * 5); }
+.r-gap-6 { row-gap: calc(var(--spacer) * 6); }
+.r-gap-7 { row-gap: calc(var(--spacer) * 7); }
+.r-gap-8 { row-gap: calc(var(--spacer) * 8); }
+.r-gap-9 { row-gap: calc(var(--spacer) * 9); }
+.r-gap-10 { row-gap: calc(var(--spacer) * 10); }
+.r-gap-11 { row-gap: calc(var(--spacer) * 11); }
+.r-gap-12 { row-gap: calc(var(--spacer) * 12); }
+
+.col-1 { grid-column: span 1; }
+.col-2 { grid-column: span 2; }
+.col-3 { grid-column: span 3; }
+.col-3 { grid-column: span 3; }
+.col-4 { grid-column: span 4; }
+.col-5 { grid-column: span 5; }
+.col-6 { grid-column: span 6; }
+.col-7 { grid-column: span 7; }
+.col-8 { grid-column: span 8; }
+.col-9 { grid-column: span 9; }
+.col-10 { grid-column: span 10; }
+.col-11 { grid-column: span 11; }
+.col-12 { grid-column: span 12; }
+
+@media (max-width: 1000px) {
+.d-grid.row-t-max { grid-auto-rows: max-content !important; }
+.d-grid.row-t-min { grid-auto-rows: min-content !important; }
+
+.d-flex.row-t-max { grid-auto-rows: max-content !important; }
+.d-flex.row-t-min { grid-auto-rows: min-content !important; }
+
+.d-flex.d-t-column { flex-direction: column !important; }
+.d-flex.d-t-row { flex-direction: row !important; }
+.d-flex.d-t-column-reverse { flex-direction: column-reverse !important; }
+.d-flex.d-t-row-reverse { flex-direction: row-reverse !important; }
+
+.d-grid.col-t-1 { grid-template-columns: repeat(1, 1fr); }
+.d-grid.col-t-2 { grid-template-columns: repeat(2, 1fr); }
+.d-grid.col-t-3 { grid-template-columns: repeat(3, 1fr); }
+.d-grid.col-t-4 { grid-template-columns: repeat(4, 1fr); }
+.d-grid.col-t-5 { grid-template-columns: repeat(5, 1fr); }
+.d-grid.col-t-6 { grid-template-columns: repeat(6, 1fr); }
+.d-grid.col-t-7 { grid-template-columns: repeat(7, 1fr); }
+.d-grid.col-t-8 { grid-template-columns: repeat(8, 1fr); }
+.d-grid.col-t-9 { grid-template-columns: repeat(9, 1fr); }
+.d-grid.col-t-10 { grid-template-columns: repeat(10, 1fr); }
+.d-grid.col-t-11 { grid-template-columns: repeat(11, 1fr); }
+.d-grid.col-t-12 { grid-template-columns: repeat(12, 1fr); }
+
+.d-flex.col-t-1 { grid-template-columns: repeat(1, 1fr); }
+.d-flex.col-t-2 { grid-template-columns: repeat(2, 1fr); }
+.d-flex.col-t-3 { grid-template-columns: repeat(3, 1fr); }
+.d-flex.col-t-4 { grid-template-columns: repeat(4, 1fr); }
+.d-flex.col-t-5 { grid-template-columns: repeat(5, 1fr); }
+.d-flex.col-t-6 { grid-template-columns: repeat(6, 1fr); }
+.d-flex.col-t-7 { grid-template-columns: repeat(7, 1fr); }
+.d-flex.col-t-8 { grid-template-columns: repeat(8, 1fr); }
+.d-flex.col-t-9 { grid-template-columns: repeat(9, 1fr); }
+.d-flex.col-t-10 { grid-template-columns: repeat(10, 1fr); }
+.d-flex.col-t-11 { grid-template-columns: repeat(11, 1fr); }
+.d-flex.col-t-12 { grid-template-columns: repeat(12, 1fr); }
+        
+.gap-t-0 { gap: calc(var(--spacer) * 0); }
+.gap-t-1 { gap: calc(var(--spacer) * 1); }
+.gap-t-2 { gap: calc(var(--spacer) * 2); }
+.gap-t-3 { gap: calc(var(--spacer) * 3); }
+.gap-t-4 { gap: calc(var(--spacer) * 4); }
+.gap-t-5 { gap: calc(var(--spacer) * 5); }
+.gap-t-6 { gap: calc(var(--spacer) * 6); }
+.gap-t-7 { gap: calc(var(--spacer) * 7); }
+.gap-t-8 { gap: calc(var(--spacer) * 8); }
+.gap-t-9 { gap: calc(var(--spacer) * 9); }
+.gap-t-10 { gap: calc(var(--spacer) * 10); }
+.gap-t-11 { gap: calc(var(--spacer) * 11); }
+.gap-t-12 { gap: calc(var(--spacer) * 12); }
+
+.r-gap-t-0 { row-gap: calc(var(--spacer) * 0); }
+.r-gap-t-1 { row-gap: calc(var(--spacer) * 1); }
+.r-gap-t-2 { row-gap: calc(var(--spacer) * 2); }
+.r-gap-t-3 { row-gap: calc(var(--spacer) * 3); }
+.r-gap-t-4 { row-gap: calc(var(--spacer) * 4); }
+.r-gap-t-5 { row-gap: calc(var(--spacer) * 5); }
+.r-gap-t-6 { row-gap: calc(var(--spacer) * 6); }
+.r-gap-t-7 { row-gap: calc(var(--spacer) * 7); }
+.r-gap-t-8 { row-gap: calc(var(--spacer) * 8); }
+.r-gap-t-9 { row-gap: calc(var(--spacer) * 9); }
+.r-gap-t-10 { row-gap: calc(var(--spacer) * 10); }
+.r-gap-t-11 { row-gap: calc(var(--spacer) * 11); }
+.r-gap-t-12 { row-gap: calc(var(--spacer) * 12); }
+
+.col-t-1 { grid-column: span 1; }
+.col-t-2 { grid-column: span 2; }
+.col-t-3 { grid-column: span 3; }
+.col-t-3 { grid-column: span 3; }
+.col-t-4 { grid-column: span 4; }
+.col-t-5 { grid-column: span 5; }
+.col-t-6 { grid-column: span 6; }
+.col-t-7 { grid-column: span 7; }
+.col-t-8 { grid-column: span 8; }
+.col-t-9 { grid-column: span 9; }
+.col-t-10 { grid-column: span 10; }
+.col-t-11 { grid-column: span 11; }
+.col-t-12 { grid-column: span 12; }
+}
+
+@media (max-width: 768px) {
+.d-grid.row-p-max { grid-auto-rows: max-content !important; }
+.d-grid.row-p-min { grid-auto-rows: min-content !important; }
+
+.d-flex.row-p-max { grid-auto-rows: max-content !important; }
+.d-flex.row-p-min { grid-auto-rows: min-content !important; }
+
+.d-flex.d-p-column { flex-direction: column !important; }
+.d-flex.d-p-row { flex-direction: row !important; }
+.d-flex.d-p-column-reverse { flex-direction: column-reverse !important; }
+.d-flex.d-p-row-reverse { flex-direction: row-reverse !important; }
+
+.d-grid.col-p-1 { grid-template-columns: repeat(1, 1fr); }
+.d-grid.col-p-2 { grid-template-columns: repeat(2, 1fr); }
+.d-grid.col-p-3 { grid-template-columns: repeat(3, 1fr); }
+.d-grid.col-p-4 { grid-template-columns: repeat(4, 1fr); }
+.d-grid.col-p-5 { grid-template-columns: repeat(5, 1fr); }
+.d-grid.col-p-6 { grid-template-columns: repeat(6, 1fr); }
+.d-grid.col-p-7 { grid-template-columns: repeat(7, 1fr); }
+.d-grid.col-p-8 { grid-template-columns: repeat(8, 1fr); }
+.d-grid.col-p-9 { grid-template-columns: repeat(9, 1fr); }
+.d-grid.col-p-10 { grid-template-columns: repeat(10, 1fr); }
+.d-grid.col-p-11 { grid-template-columns: repeat(11, 1fr); }
+.d-grid.col-p-12 { grid-template-columns: repeat(12, 1fr); }
+
+.d-flex.col-p-1 { grid-template-columns: repeat(1, 1fr); }
+.d-flex.col-p-2 { grid-template-columns: repeat(2, 1fr); }
+.d-flex.col-p-3 { grid-template-columns: repeat(3, 1fr); }
+.d-flex.col-p-4 { grid-template-columns: repeat(4, 1fr); }
+.d-flex.col-p-5 { grid-template-columns: repeat(5, 1fr); }
+.d-flex.col-p-6 { grid-template-columns: repeat(6, 1fr); }
+.d-flex.col-p-7 { grid-template-columns: repeat(7, 1fr); }
+.d-flex.col-p-8 { grid-template-columns: repeat(8, 1fr); }
+.d-flex.col-p-9 { grid-template-columns: repeat(9, 1fr); }
+.d-flex.col-p-10 { grid-template-columns: repeat(10, 1fr); }
+.d-flex.col-p-11 { grid-template-columns: repeat(11, 1fr); }
+.d-flex.col-p-12 { grid-template-columns: repeat(12, 1fr); }
+
+.gap-p-0 { gap: calc(var(--spacer) * 0); }
+.gap-p-1 { gap: calc(var(--spacer) * 1); }
+.gap-p-2 { gap: calc(var(--spacer) * 2); }
+.gap-p-3 { gap: calc(var(--spacer) * 3); }
+.gap-p-4 { gap: calc(var(--spacer) * 4); }
+.gap-p-5 { gap: calc(var(--spacer) * 5); }
+.gap-p-6 { gap: calc(var(--spacer) * 6); }
+.gap-p-7 { gap: calc(var(--spacer) * 7); }
+.gap-p-8 { gap: calc(var(--spacer) * 8); }
+.gap-p-9 { gap: calc(var(--spacer) * 9); }
+.gap-p-10 { gap: calc(var(--spacer) * 10); }
+.gap-p-11 { gap: calc(var(--spacer) * 11); }
+.gap-p-12 { gap: calc(var(--spacer) * 12); }
+
+.r-gap-p-0 { row-gap: calc(var(--spacer) * 0); }
+.r-gap-p-1 { row-gap: calc(var(--spacer) * 1); }
+.r-gap-p-2 { row-gap: calc(var(--spacer) * 2); }
+.r-gap-p-3 { row-gap: calc(var(--spacer) * 3); }
+.r-gap-p-4 { row-gap: calc(var(--spacer) * 4); }
+.r-gap-p-5 { row-gap: calc(var(--spacer) * 5); }
+.r-gap-p-6 { row-gap: calc(var(--spacer) * 6); }
+.r-gap-p-7 { row-gap: calc(var(--spacer) * 7); }
+.r-gap-p-8 { row-gap: calc(var(--spacer) * 8); }
+.r-gap-p-9 { row-gap: calc(var(--spacer) * 9); }
+.r-gap-p-10 { row-gap: calc(var(--spacer) * 10); }
+.r-gap-p-11 { row-gap: calc(var(--spacer) * 11); }
+.r-gap-p-12 { row-gap: calc(var(--spacer) * 12); }
+
+.col-p-1 { grid-column: span 1; }
+.col-p-2 { grid-column: span 2; }
+.col-p-3 { grid-column: span 3; }
+.col-p-3 { grid-column: span 3; }
+.col-p-4 { grid-column: span 4; }
+.col-p-5 { grid-column: span 5; }
+.col-p-6 { grid-column: span 6; }
+.col-p-7 { grid-column: span 7; }
+.col-p-8 { grid-column: span 8; }
+.col-p-9 { grid-column: span 9; }
+.col-p-10 { grid-column: span 10; }
+.col-p-11 { grid-column: span 11; }
+.col-p-12 { grid-column: span 12; }
+}