@import "./properties.css";
@import "../media.css";

.grid,
.row,
.col {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.stretch,
.stretch > .col {
  align-items: stretch;
}

.stretch > .col > * {
  flex: 1;
}

.grid {
  width: 100%;
  flex-direction: row;
  align-content: stretch;
}

.col {
  flex-direction: column;
}

.row {
  flex: 1 0 100%;
  align-content: space-between;
  margin-left: calc(-1 * var(--grid-column-spacing));
}

.row:last-child {
  margin-bottom: calc(-1 * var(--grid-column-spacing));
}

.flex > * {
  flex: 1;
}

.row > * {
  padding-left: var(--grid-column-spacing);
  padding-bottom: var(--grid-row-spacing);
}

.fullHeight {
  height: 100%;
}

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

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

.centerAlign {
  align-items: center;
}

@each name in tv, desk, tablet, palm {
  @media (--media-$(name)) {
    @each size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
      .$(name)$(size) {
        width: calc((100% / var(--grid-max-columns)) * $(size));
        flex: unset;
      }
    }
  }
}