$table-bp: 900;

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

.o-table__table {
  --colums: 4;
  --min-column-width: min(80vw, 210px);
  --odd-column-bg-color: #f2f5f7;

  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-radius: 16px 16px;
  overflow: hidden;

  @include mq($max: $table-bp) {
    overflow: scroll;
  }
}


.o-table__head {
  font-size: 1.375rem;
  font-family: $_font-primary;
  color: #202121;

  hyphens: auto;
}

.o-table__head-row {

}

.o-table__head-item {
  width: calc(100% / var(--colums));
  min-width: var(--min-column-width);
  padding: 40px 5px 20px;

  &:nth-child(odd) {
    background-color: var(--odd-column-bg-color);
  }
}

.o-table__body {

}

.o-table__body-row {

}

.o-table__body-item {
  width: calc(100% / var(--colums));
  min-width: var(--min-column-width);
  padding-block: 16px;
  padding-inline: clamp(16px, 4%, 42px);
  hyphens: auto;

  &:nth-child(odd) {
    background-color: var(--odd-column-bg-color);
  }
}

.o-table__anchor {
  text-decoration: none;
  color: inherit;
}