.menu {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  --xgap: var(--p2);
  --ygap: var(--p2);
  gap: var(--ygap) var(--xgap);
}

.menu.vertical {
  flex-wrap: nowrap;
}


.menu.expanded> *{-webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;}


/* align */
.align-middle {
  align-items: center;
}
.align-content-middle{align-content:center}

.align-top {
  align-items: flex-start;
}

.align-content-top {
  align-content: flex-start;
}

.align-baseline {
  align-items: baseline;
}


.align-bottom {
  align-items: flex-end;
}

.align-content-bottom {
  align-content: end;
}

.align-stretch {
  align-items: stretch;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}

.align-self-center{align-self:center}
.align-self-start{align-self:flex-start}
.align-self-end{align-self:flex-end}
.align-self-stretch{align-self:stretch}

.justify-self-center{justify-self:center}
.justify-self-start{justify-self:flex-start}
.justify-self-end{justify-self:flex-end}


/* grid */
.wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  padding-inline: var(--p1);
}
.wrapper.full{padding:0}

@layer flexGrid {

.grid {
  display: grid;
  gap: 2.5rem 1.4rem;
}

.grid-flow-row {
  grid-auto-flow: row;
}
.grid-flow-col {
  grid-auto-flow: column;
}
.grid-flow-dense {
  grid-auto-flow: dense;
}
.grid-flow-row-dense {
  grid-auto-flow: row dense;
}
.grid-flow-col-dense {
  grid-auto-flow: column dense;
}



@media screen and (min-width:22.45em){

.row-span-2{grid-row:span 2}
.row-span-3{grid-row:span 3}
.row-span-4{grid-row:span 4}
.row-span-5{grid-row:span 5}

.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}
.col-span-4{grid-column:span 4}
.col-span-5{grid-column:span 5}
.col-span-6{grid-column:span 6}
.col-span-7{grid-column:span 7}
.col-span-8{grid-column:span 8}
.col-span-9{grid-column:span 9}
.col-span-10{grid-column:span 10}
.col-span-11{grid-column:span 11}
.col-span-12{grid-column:span 12}

}

@media screen and (min-width:40em){
.medium-row-span-2{grid-row:span 2}
.medium-row-span-3{grid-row:span 3}
.medium-row-span-4{grid-row:span 4}
.medium-row-span-5{grid-row:span 5}
.medium-row-span-6{grid-row:span 6}
.medium-row-span-7{grid-row:span 7}

.medium-col-span-1{grid-column:span 1}
.medium-col-span-2{grid-column:span 2}
.medium-col-span-3{grid-column:span 3}
.medium-col-span-4{grid-column:span 4}
.medium-col-span-5{grid-column:span 5}
.medium-col-span-6{grid-column:span 6}
.medium-col-span-7{grid-column:span 7}
.medium-col-span-8{grid-column:span 8}
.medium-col-span-9{grid-column:span 9}
.medium-col-span-10{grid-column:span 10}
.medium-col-span-11{grid-column:span 11}
.medium-col-span-12{grid-column:span 12}
}

@media screen and (min-width:64em){
.large-row-span-2{grid-row:span 2}
.large-row-span-3{grid-row:span 3}
.large-row-span-4{grid-row:span 4}
.large-row-span-5{grid-row:span 5}
.large-row-span-6{grid-row:span 6}
.large-row-span-7{grid-row:span 7}

.large-col-span-1{grid-column:span 1}
.large-col-span-2{grid-column:span 2}
.large-col-span-3{grid-column:span 3}
.large-col-span-4{grid-column:span 4}
.large-col-span-5{grid-column:span 5}
.large-col-span-6{grid-column:span 6}
.large-col-span-7{grid-column:span 7}
.large-col-span-8{grid-column:span 8}
.large-col-span-9{grid-column:span 9}
.large-col-span-10{grid-column:span 10}
.large-col-span-11{grid-column:span 11}
.large-col-span-12{grid-column:span 12}
}


.grid-minmax{
  grid-template-columns: repeat(auto-fit, minmax(var(--minmax,5rem), 1fr));; 
}
.grid-minmax > * >*{min-width:var(--minmax,5rem)}

.grid-minmax-cols{
--grid-max-col-count:var(--count,5);
--grid-min-col-size: var(--minWidth,14rem);
--grid-gap:var(--p1);
/* calculation*/
--grid-col-size-calc: calc((100% - var(--grid-gap) * (var(--grid-max-col-count) - 1)) / var(--grid-max-col-count));
--grid-col-min-size-calc: min(max(var(--grid-min-col-size), var(--grid-col-size-calc)), 100%);

display:grid;
grid-auto-flow:dense;
gap:var(--p2) var(--grid-gap);
grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-min-size-calc), 1fr) );
}

.grid-minmax-cols > *{ max-width:min(100%,var(--maxWidth))}


@media screen and (min-width:22.45em){

.grid-cols-1 {
  grid-template-columns: repeat(1, 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));
}
.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-none {
  grid-template-columns: none;
}
.grid-cols-subgrid {
  grid-template-columns: subgrid;
}


@media print, screen and (min-width: 40em) {
  .medium-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .medium-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .medium-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .medium-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .medium-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .medium-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .medium-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .medium-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .medium-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .medium-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .medium-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .medium-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}


@media print, screen and (min-width: 64em) {
  .large-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .large-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .large-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .large-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .large-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .large-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .large-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .large-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .large-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .large-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .large-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .large-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}



@media print, screen and (min-width: 90em) {
  .xlarge-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .xlarge-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xlarge-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xlarge-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xlarge-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xlarge-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xlarge-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .xlarge-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .xlarge-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .xlarge-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .xlarge-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .xlarge-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}




/* flex */
.flex-container {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
}
.flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
 gap:  var(--gap);
  --gap: var(--xgap) var(--ygap);
  --xgap: var(--p3);
   --ygap: var(--p3);
}
.flex > * {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
 /* width: 100%;*/
}
.flex > .auto {
  -ms-flex: 1 1 0px;
  flex: 1 1 0px;
}

.flex > .auto-stretch {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.flex-row{flex-direction:row}
.flex-row-reverse{flex-direction:row-reverse}
.flex-col{flex-direction:column}
.flex-col-reverse{flex-direction:column-reverse}

.nowrap {
  flex-wrap: nowrap !important;
}
.flex > .shrink,
.flex > .small-1,
.flex > .small-10,
.flex > .small-11,
.flex > .small-12,
.flex > .small-2,
.flex > .small-3,
.flex > .small-4,
.flex > .small-5,
.flex > .small-6,
.flex > .small-7,
.flex > .small-8,
.flex > .small-9 {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.flex > .auto,
.flex > .shrink {
  width: auto;
}
.flex > .small-1,
.flex > .small-10,
.flex > .small-11,
.flex > .small-12,
.flex > .small-2,
.flex > .small-3,
.flex > .small-4,
.flex > .small-5,
.flex > .small-6,
.flex > .small-7,
.flex > .small-8,
.flex > .small-9,
.flex > .small-full,
.flex > .small-shrink {
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
     width: calc((100% / 12 * var(--columnN)) - var(--xgap));
}
  .flex > .small-1 {
   flex: 1 0 6%;
  max-width: 8.3333%;
 
  }
  .flex > .small-2 {
   flex: 2 0 14%;
  max-width: 16.666%;
   
  }
  .flex > .small-3 {
   flex: 3 0 22%;
  max-width: 25%;
  
  }
  .flex > .small-4 {
   flex: 4 0 30%;
  max-width: 33.3333%;
      
   
  }
  .flex > .small-5 {
   flex: 5 0 38%;
  max-width: 41.666%;
  }
  .flex > .small-6 {
     flex: 6 0 46%;
  max-width: 49%;
  
  }
  .flex > .small-7 {
       flex: 7 0 55%;
  max-width:  58.333%;
  
  }
  .flex > .small-8 {
      flex:8 0 63%;
  max-width: 66.666%;
 
  }
  .flex > .small-9 {
       flex: 9 0 72%;
  max-width: 75%;
   
  }
  .flex > .small-10 {
     flex: 10 0 82%;
  max-width: 83.333%;
  }
  .flex > .small-11 {
     flex: 11 0 88%;
  max-width:  91.66%
  }
.flex > .small-12 {
 width: 100%;
}

@media print, screen and (max-width: 24em) {
  .flex > .xs-12 {
    width: 100%;flex: 0 0 auto;
  }
}

@media print, screen and (min-width: 40em) {
  .flex > .medium-auto-stretch {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width:revert;
}
  .flex > .medium-1,
  .flex > .medium-10,
  .flex > .medium-11,
  .flex > .medium-12,
  .flex > .medium-2,
  .flex > .medium-3,
  .flex > .medium-4,
  .flex > .medium-5,
  .flex > .medium-6,
  .flex > .medium-7,
  .flex > .medium-8,
  .flex > .medium-9,
  .flex > .medium-full{
       -ms-flex-preferred-size: auto;
    flex-basis: auto;
      width: calc((100% / 12 * var(--columnN)) - var(--xgap));
  }
  .flex > .medium-shrink {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .flex > .medium-auto {
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    width: auto;
  }
  .flex > .medium-1,
  .flex > .medium-10,
  .flex > .medium-11,
  .flex > .medium-12,
  .flex > .medium-2,
  .flex > .medium-3,
  .flex > .medium-4,
  .flex > .medium-5,
  .flex > .medium-6,
  .flex > .medium-7,
  .flex > .medium-8,
  .flex > .medium-9,
  .flex > .medium-shrink {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .flex > .medium-shrink {
    width: auto;
  }
 .flex > .medium-1 {
   flex: 1 0 6%;
  max-width: 8.3333%;
 
  }
  .flex > .medium-2 {
   flex: 2 0 14%;
  max-width: 16.666%;
   
  }
  .flex > .medium-3 {
   flex: 3 0 22%;
  max-width: 25%;
  
  }
  .flex > .medium-4 {
   flex: 4 0 30%;
  max-width: 33.3333%;
      
   
  }
  .flex > .medium-5 {
   flex: 5 0 38%;
  max-width: 41.666%;
  }
  .flex > .medium-6 {
     flex: 6 0 46%;
  max-width: 49%;
  
  }
  .flex > .medium-7 {
       flex: 7 0 55%;
  max-width:  58.333%;
  
  }
  .flex > .medium-8 {
      flex:8 0 63%;
  max-width: 66.666%;
 
  }
  .flex > .medium-9 {
       flex: 9 0 72%;
  max-width: 75%;
   
  }
  .flex > .medium-10 {
     flex: 10 0 82%;
  max-width: 83.333%;
  }
  .flex > .medium-11 {
     flex: 11 0 88%;
  max-width:  91.66%
  }
   .flex > .medium-12 {
  width:100%
  }
}
@media print, screen and (min-width: 64em) {
  .flex > .large-1,
  .flex > .large-10,
  .flex > .large-11,
  .flex > .large-12,
  .flex > .large-2,
  .flex > .large-3,
  .flex > .large-4,
  .flex > .large-5,
  .flex > .large-6,
  .flex > .large-7,
  .flex > .large-8,
  .flex > .large-9,
  .flex > .large-full,
  .flex > .large-shrink {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .flex > .large-auto {
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    width: auto;
  }
  .flex > .large-1,
  .flex > .large-10,
  .flex > .large-11,
  .flex > .large-12,
  .flex > .large-2,
  .flex > .large-3,
  .flex > .large-4,
  .flex > .large-5,
  .flex > .large-6,
  .flex > .large-7,
  .flex > .large-8,
  .flex > .large-9{
      -ms-flex: 0 0 auto;
    flex: 0 0 auto;
   
  }
  .flex > .large-shrink {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .flex > .large-shrink {
    width: auto;
  }
 .flex > .large-1 {
   flex: 1 0 6%;
  max-width: 8.3333%;
 
  }
  .flex > .large-2 {
   flex: 2 0 14%;
  max-width: 16.666%;
   
  }
  .flex > .large-3 {
   flex: 3 0 22%;
  max-width: 25%;
  
  }
  .flex > .large-4 {
   flex: 4 0 30%;
  max-width: 33.3333%;
      
   
  }
  .flex > .large-5 {
   flex: 5 0 38%;
  max-width: 41.666%;
  }
  .flex > .large-6 {
     flex: 6 0 46%;
  max-width: 49%;
  
  }
  .flex > .large-7 {
       flex: 7 0 55%;
  max-width:  58.333%;
  
  }
  .flex > .large-8 {
      flex:8 0 63%;
  max-width: 66.666%;
 
  }
  .flex > .large-9 {
       flex: 9 0 72%;
  max-width: 75%;
   
  }
  .flex > .large-10 {
     flex: 10 0 82%;
  max-width: 83.333%;
  }
  .flex > .large-11 {
     flex: 11 0 88%;
  max-width:  91.66%
  }
  .flex > .large-12 {
  width: 100%;
  }
}

@media print, screen and (min-width: 85em) {
  .flex > .x-large-1,
  .flex > .x-large-10,
  .flex > .x-large-11,
  .flex > .x-large-12,
  .flex > .x-large-2,
  .flex > .x-large-3,
  .flex > .x-large-4,
  .flex > .x-large-5,
  .flex > .x-large-6,
  .flex > .x-large-7,
  .flex > .x-large-8,
  .flex > .x-large-9,
  .flex > .x-large-full,
  .flex > .x-large-shrink {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .flex > .x-large-auto {
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    width: auto;
  }
  .flex > .x-large-1,
  .flex > .x-large-10,
  .flex > .x-large-11,
  .flex > .x-large-12,
  .flex > .x-large-2,
  .flex > .x-large-3,
  .flex > .x-large-4,
  .flex > .x-large-5,
  .flex > .x-large-6,
  .flex > .x-large-7,
  .flex > .x-large-8,
  .flex > .x-large-9,
  .flex > .x-large-shrink {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .flex > .x-large-shrink {
    width: auto;
  }
  .flex > .x-large-1 {
   flex: 1 0 6%;
  max-width: 8.3333%;
 
  }
  .flex > .x-large-2 {
   flex: 2 0 14%;
  max-width: 16.666%;
   
  }
  .flex > .x-large-3 {
   flex: 3 0 22%;
  max-width: 25%;
  
  }
  .flex > .x-large-4 {
   flex: 4 0 30%;
  max-width: 33.3333%;
      
   
  }
  .flex > .x-large-5 {
   flex: 5 0 38%;
  max-width: 41.666%;
  }
  .flex > .x-large-6 {
     flex: 6 0 46%;
  max-width: 49%;
  
  }
  .flex > .x-large-7 {
       flex: 7 0 55%;
  max-width:  58.333%;
  
  }
  .flex > .x-large-8 {
      flex:8 0 63%;
  max-width: 66.666%;
 
  }
  .flex > .x-large-9 {
       flex: 9 0 72%;
  max-width: 75%;
   
  }
  .flex > .x-large-10 {
     flex: 10 0 82%;
  max-width: 83.333%;
  }
  .flex > .x-large-11 {
     flex: 11 0 88%;
  max-width:  91.66%
  }
  .flex > .x-large-12 {
    width: 100%;
  }
}


.flex.vertical,
.menu.vertical {
  flex-flow: column;
  height: 100%;
}
@media print, screen and (max-width: 1800px) {

  body {
    overflow-x: clip;
  }
}

}


/* OFFSET */
.small-offset-1 {
  margin-left: 8.33333%;
}
.small-offset-2 {
  margin-left: 16.66667%;
}
.small-offset-3 {
  margin-left: 25%;
}
.small-offset-4 {
  margin-left: 33.33333%;
}
.small-offset-5 {
  margin-left: 41.66667%;
}
.small-offset-6 {
  margin-left: 50%;
}
@media print, screen and (min-width: 40em) {
  .medium-offset-0 {
    margin-left: 0;
  }

  .medium-offset-1 {
    margin-left: 8.33333%;
  }

  .medium-offset-2 {
    margin-left: 16.66667%;
  }

  .medium-offset-3 {
    margin-left: 25%;
  }

  .medium-offset-4 {
    margin-left: 33.33333%;
  }

  .medium-offset-5 {
    margin-left: 41.66667%;
  }

  .medium-offset-6 {
    margin-left: 50%;
  }
}
@media print, screen and (min-width: 64em) {
  .large-offset-0 {
    margin-left: 0;
  }

  .large-offset-1 {
    margin-left: 8.33333%;
  }

  .large-offset-2 {
    margin-left: 16.66667%;
  }

  .large-offset-3 {
    margin-left: 25%;
  }

  .large-offset-4 {
    margin-left: 33.33333%;
  }

  .large-offset-5 {
    margin-left: 41.66667%;
  }

  .large-offset-6 {
    margin-left: 50%;
  }
}


.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}
.order-6 {
  order: 6;
}
.order-7 {
  order: 7;
}
.order-8 {
  order: 8;
}
.order-9 {
  order:9;
}
.order-10 {
  order: 10;
}
.order-11 {
  order: 11;
}
.order-12 {
  order: 12;
}
.order-13 {
  order: 13;
}
.order-14 {
  order: 14;
}
.order-15 {
  order: 15;
}
.order-16 {
  order: 16;
}
.order-17 {
  order: 17;
}
.order-18 {
  order: 18;
}
.order-19 {
  order: 19;
}
.order-20 {
  order: 20;
}

.order-30 {
  order: 30;
}
.order-40 {
  order: 40;
}
.order-50 {
  order: 50;
}

@media print, screen and (min-width: 40em) {
  .medium-order-1 {
    order: 1;
  }
  .medium-order-2 {
    order: 2;
  }
  .medium-order-3 {
    order: 3;
  }
  .medium-order-4 {
    order: 4;
  }
  .medium-order-5 {
    order: 5;
  }
  .medium-order-6 {
    order: 6;
  }
  .medium-order-7 {
    order: 7;
  }
  .medium-order-8 {
    order: 8;
  }
  .medium-order-9 {
    order: 9;
  }
  .medium-order-10 {
    order: 10;
  }
  .medium-order-11{
    order: 11;
  }
  .medium-order-12 {
    order: 12;
  }
}

@media print, screen and (min-width: 64em) {
  .large-order-1 {
    order: 1;
  }
  .large-order-2 {
    order: 2;
  }
  .large-order-3 {
    order: 3;
  }
  .large-order-4 {
    order: 4;
  }
  .large-order-5 {
    order: 5;
  }
  .large-order-6 {
    order: 6;
  }
  .large-order-7 {
    order: 7;
  }
  .large-order-8 {
    order: 8;
  }
  .large-order-9 {
    order: 9;
  }
  .large-order-10 {
    order: 10;
  }
  .large-order-11{
    order: 11;
  }
  .large-order-12 {
    order: 12;
  }
}

[class*="gap-"] {
  --xgap: 1.4rem;
  --ygap: 1.4rem;
  gap:var(--ygap) var(--xgap) ;
}
.gap-0 {
  gap: 0;
}
.gap-05 {
  --xgap: calc(var(--p1) * 0.5);
  --ygap: calc(var(--p1) * 0.5);
}
.gap-1 {
  --xgap: var(--p1);
  --ygap: var(--p1);
}
.gap-2 {
  --xgap: var(--p2);
  --ygap: var(--p2);
}
.gap-3 {
  --xgap: var(--p3);
  --ygap: var(--p3);
}
.gap-4 {
  --xgap: var(--p4);
  --ygap: var(--p4);
}
.gap-5 {
  --xgap: var(--p5);
  --ygap: var(--p5);
}
.gap-6 {
  --xgap: var(--p6);
  --ygap: var(--p6);
}

.gap-x-05 {
  column-gap: calc(var(--p1) * 0.5);
}
.gap-x-1 {
  column-gap: var(--p1);
}
.gap-x-2 {
  column-gap: var(--p2);
}
.gap-x-3 {
  column-gap: var(--p3);
}
.gap-x-4 {
  column-gap: var(--p4);
}
.gap-x-5 {
  column-gap: var(--p5);
}
.gap-x-6 {
  column-gap: var(--p6);
}

.gap-y-05 {
  row-gap: calc(var(--p1) * 0.5);
}
.gap-y-1 {
  row-gap: var(--p1);
}
.gap-y-2 {
  row-gap: var(--p2);
}
.gap-y-3 {
  row-gap: var(--p3);
}
.gap-y-4 {
  row-gap: var(--p4);
}
.gap-y-5 {
  row-gap: var(--p5);
}
.gap-y-6 {
  row-gap: var(--p6);
}


/* VERTICAL ALIGNMENT */
.vertical-align-middle{vertical-align:middle}
.vertical-align-top{vertical-align:top}
.vertical-align-bottom{vertical-align:bottom}