/* grid */
:root {
  --columns: 12;
  --gap: 8px;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 100%;
  padding: 8px;
}

.row-char {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 8px;
  gap: 0;
}

.row-motion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 100%;
}

.col {
  flex: 0 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  border-radius: 5px;
}

.col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.col-end {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
}

.col-line {
  border-right: 0.5px solid red;
  border-radius: 0%;
}

.col-full-height {
  min-height: calc(100vh - 120px);
}

.empty {
  margin-top: 8vh;
}

@media (max-width: 768px) {
  .col-line {
    border-right: none;
  }
}

/* .col-sticky {
  overflow-y: auto;
  max-height: 100vh;
} */

@media (max-width: 768px) {
  .col-sticky {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Correctly calculated column widths considering the gap */
.col-05 {
  flex: 0 0
    calc(
      100% / var(--columns) * 0.5 -
        (var(--gap) * (var(--columns) - 0.5) / var(--columns))
    );
}
.col-1 {
  flex: 0 0
    calc(
      100% / var(--columns) * 1 -
        (var(--gap) * (var(--columns) - 1) / var(--columns))
    );
}
.col-2 {
  flex: 0 0
    calc(
      100% / var(--columns) * 2 -
        (var(--gap) * (var(--columns) - 2) / var(--columns))
    );
}
.col-3 {
  flex: 0 0
    calc(
      100% / var(--columns) * 3 -
        (var(--gap) * (var(--columns) - 3) / var(--columns))
    );
}
.col-4 {
  flex: 0 0
    calc(
      100% / var(--columns) * 4 -
        (var(--gap) * (var(--columns) - 4) / var(--columns))
    );
}
.col-5 {
  flex: 0 0
    calc(
      100% / var(--columns) * 5 -
        (var(--gap) * (var(--columns) - 5) / var(--columns))
    );
}
.col-6 {
  flex: 0 0
    calc(
      100% / var(--columns) * 6 -
        (var(--gap) * (var(--columns) - 6) / var(--columns))
    );
}
.col-7 {
  flex: 0 0
    calc(
      100% / var(--columns) * 7 -
        (var(--gap) * (var(--columns) - 7) / var(--columns))
    );
}
.col-8 {
  flex: 0 0
    calc(
      100% / var(--columns) * 8 -
        (var(--gap) * (var(--columns) - 8) / var(--columns))
    );
}
.col-9 {
  flex: 0 0
    calc(
      100% / var(--columns) * 9 -
        (var(--gap) * (var(--columns) - 9) / var(--columns))
    );
}
.col-10 {
  flex: 0 0
    calc(
      100% / var(--columns) * 10 -
        (var(--gap) * (var(--columns) - 10) / var(--columns))
    );
}
.col-11 {
  flex: 0 0
    calc(
      100% / var(--columns) * 11 -
        (var(--gap) * (var(--columns) - 11) / var(--columns))
    );
}
.col-12 {
  flex: 0 0
    calc(
      100% / var(--columns) * 12 -
        (var(--gap) * (var(--columns) - 12) / var(--columns))
    );
}

@media (max-width: 768px) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    flex: 0 0 calc(100%);
  }
}