/* Size */

@media (min-width: 1200px) {
  .portrait {
    max-width: 1200px;
    margin: auto !important;
  }
}

.w {
  width: 100%;
  box-sizing: border-box;
}

.h {
  height: 100%;
  box-sizing: border-box;
}

/* Overflow */

.overflow-x {
  overflow-x: auto;
}

.overflow-y {
  overflow-y: auto;
}

/* Spacing */

.m, .my, .mt {
  margin-top: auto !important;
}
.m, .my, .mb {
  margin-bottom: auto !important;
}
.m, .mx, .ml {
  margin-left: auto !important;
}
.m, .mx, .mr {
  margin-right: auto !important;
}

.m0, .my0, .mt0 {
  margin-top: 0 !important;
}
.m0, .my0, .mb0 {
  margin-bottom: 0 !important;
}
.m0, .mx0, .ml0 {
  margin-left: 0 !important;
}
.m0, .mx0, .mr0 {
  margin-right: 0 !important;
}

.m1, .my1, .mt1 {
  margin-top: var(--margin-t) !important;
}
.m1, .my1, .mb1 {
  margin-bottom: var(--margin-b) !important;
}
.m1, .mx1, .ml1 {
  margin-left: var(--margin-l) !important;
}
.m1, .mx1, .mr1 {
  margin-right: var(--margin-r) !important;
}

.m2, .my2, .mt2 {
  margin-top: calc(var(--margin-t) * var(--margin-ratio2)) !important;
}
.m2, .my2, .mb2 {
  margin-bottom: calc(var(--margin-b) * var(--margin-ratio2)) !important;
}
.m2, .mx2, .ml2 {
  margin-left: calc(var(--margin-l) * var(--margin-ratio2)) !important;
}
.m2, .mx2, .mr2 {
  margin-right: calc(var(--margin-r) * var(--margin-ratio2)) !important;
}

.m3, .my3, .mt3 {
  margin-top: calc(var(--margin-t) * var(--margin-ratio3)) !important;
}
.m3, .my3, .mb3 {
  margin-bottom: calc(var(--margin-b) * var(--margin-ratio3)) !important;
}
.m3, .mx3, .ml3 {
  margin-left: calc(var(--margin-l) * var(--margin-ratio3)) !important;
}
.m3, .mx3, .mr3 {
  margin-right: calc(var(--margin-r) * var(--margin-ratio3)) !important;
}

.p-input {
  padding: var(--padding-input) !important;
}

.p, .py, .pt {
  padding-top: auto !important;
}
.p, .py, .pb {
  padding-bottom: auto !important;
}
.p, .px, .pl {
  padding-left: auto !important;
}
.p, .px, .pr {
  padding-right: auto !important;
}

.p0, .py0, .pt0 {
  padding-top: 0 !important;
}
.p0, .py0, .pb0 {
  padding-bottom: 0 !important;
}
.p0, .px0, .pl0 {
  padding-left: 0 !important;
}
.p0, .px0, .pr0 {
  padding-right: 0 !important;
}

.p1, .py1, .pt1 {
  padding-top: var(--padding-t) !important;
}
.p1, .py1, .pb1 {
  padding-bottom: var(--padding-b) !important;
}
.p1, .px1, .pl1 {
  padding-left: var(--padding-l) !important;
}
.p1, .px1, .pr1 {
  padding-right: var(--padding-r) !important;
}

.p2, .py2, .pt2 {
  padding-top: calc(var(--padding-t) * var(--padding-ratio2)) !important;
}
.p2, .py2, .pb2 {
  padding-bottom: calc(var(--padding-b) * var(--padding-ratio2)) !important;
}
.p2, .px2, .pl2 {
  padding-left: calc(var(--padding-l) * var(--padding-ratio2)) !important;
}
.p2, .px2, .pr2 {
  padding-right: calc(var(--padding-r) * var(--padding-ratio2)) !important;
}

.p3, .py3, .pt3 {
  padding-top: calc(var(--padding-t) * var(--padding-ratio3)) !important;
}
.p3, .py3, .pb3 {
  padding-bottom: calc(var(--padding-b) * var(--padding-ratio3)) !important;
}
.p3, .px3, .pl3 {
  padding-left: calc(var(--padding-l) * var(--padding-ratio3)) !important;
}
.p3, .px3, .pr3 {
  padding-right: calc(var(--padding-r) * var(--padding-ratio3)) !important;
}

/* Position */

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}

.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.static {
  position: static;
}
.sticky {
  position: sticky;
}

.top {
  top: 0;
}
.right {
  right: 0;
}
.bottom {
  bottom: 0;
}
.left {
  left: 0;
}
.top-100 {
  top: 100%;
}
.right-100 {
  right: 100%;
}
.bottom-100 {
  bottom: 100%;
}
.left-100 {
  left: 100%;
}

.float-right {
  float: right;
}
.float-left {
  float: left;
}
.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

/* Flex */

.flex {
  display: flex !important;
}

@media (max-width: 900px) {
  .flex {
    flex-direction: column;
  }
}

.flex-wrap {
  display: flex !important;
  flex-wrap: wrap;
}

.flex-center {
  display: flex !important;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.flex-column {
  display: flex !important;
  flex-direction: column;
}

.flex-row {
  display: flex !important;
}

.flex-auto {
  flex: auto;
}
.flex-0 {
  flex: 0;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.flex-4 {
  flex: 4;
}
.flex-5 {
  flex: 5;
}
.flex-6 {
  flex: 6;
}
.flex-7 {
  flex: 7;
}
.flex-8 {
  flex: 8;
}

/* Grid */

.grid-fit,
.grid-fill {
  display: grid;

  > .col-2 {
    grid-column: span 2;
  }
  > .col-3 {
    grid-column: span 3;
  }
  > .w {
    grid-column: 1 / -1;
  }

  > .row-2 {
    grid-row: span 2;
  }
  > .row-3 {
    grid-row: span 3;
  }
}

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

.grid-fill {
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-width), 1fr));
}

.g1 {
  gap: var(--gap);
}
.g2 {
  gap: calc(var(--gap) * var(--gap-ratio2));
}
.g3 {
  gap: calc(var(--gap) * var(--gap-ratio3));
}

.mirror {
  transform: rotate(180deg);
}

.line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}