.fwidth{
  width:100% !important;
}
.fheight{
  height:100%;
}


/*h|w*/
.auto-height{height:auto;}
.height1{height:var(--grid1)}
.height2{height:var(--grid2)}
.height3{height:var(--grid3)}
.height4{height:var(--grid4)}
.height5{height:var(--grid5)}
.height6{height:var(--grid6)}
.height6-5{height:calc(var(--grid05) + var(--grid6));}
.height7{height:var(--grid7)}
.height7-5{height:calc(var(--grid05) + var(--grid7));}
.height8{height:var(--grid8)}
.height9{height:var(--grid9)}
.height10{height:var(--grid10)}
.height11{height:var(--grid11)}
.height12{height:var(--grid12)}
.height13{height:var(--grid13)}
.height14{height:var(--grid14)}
.height15{height:var(--grid15)}

.auto-width{width:auto;}
.width1{width:var(--grid1)}
.width2{width:var(--grid2)}
.width3{width:var(--grid3)}
.width4{width:var(--grid4)}
.width5{width:var(--grid5)}
.width6{width:var(--grid6)}
.width7{width:var(--grid7)}
.width8{width:var(--grid8)}
.width9{width:var(--grid9)}
.width10{width:var(--grid10)}
.width11{width:var(--grid11)}
.width12{width:var(--grid12)}
.width13{width:var(--grid13)}
.width14{width:var(--grid14)}
.width15{width:var(--grid15)}
.width16{width:var(--grid16)}
.width17{width:var(--grid17)}
.width18{width:var(--grid18)}
.width19{width:var(--grid19)}
.width20{width:var(--grid20)}

.max-width10{max-width:var(--grid10)}
.max-width15{max-width:var(--grid15)}
.max-width20{max-width:var(--grid20)}
.max-width25{max-width:var(--grid25)}
.max-width27{max-width:var(--grid27)}
.max-width30{max-width:var(--grid30)}

.pad1{padding:var(--grid1)}
.pad2{padding:var(--grid2)}
.pad3{padding:var(--grid3)}
.pad4{padding:var(--grid4)}
.pad5{padding:var(--grid5)}

/*margins*/
.mb1{margin-bottom:var(--grid1)}

/*paddings*/
.pb1{padding-bottom:var(--grid1)}
.pt1{padding-top:var(--grid1)}