$horizontal-padding: .8rem;
$picture-size: 3.6rem;

.table {
  width: 100%;
  border-collapse: collapse;

  &__row {
    &--header {
      display: none;
      line-height: 2.25rem;
      font-size: 8.5pt;
      text-transform: uppercase;
      text-align: left;
      border-bottom: 1px solid #dedede;

      background: #eee;

      @media screen and (min-width: 600px) {
        display: table-row;
      }
    }

    &--body {
      margin-bottom: 1.2rem;
      padding: .6rem;
      line-height: 2.25rem;

      &:last-child {
        margin-bottom: 0;
      }

      &:hover {
        background: #eee;
      }

      @media screen and (max-width: 600px) {
        display: block;
        background: #fff;
        border: 1px solid #dedede;
        border-radius: 5px;
      }
    }

  }

  &__header {
    display: hidden;

    &--border {
      border: 1px solid #dedede;
    }

    &--checkbox {
      // width: 2rem;
    }

    &--label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @media screen and (min-width: 600px) {
      display: table-cell;
      padding: .2rem $horizontal-padding;
    }
  }

  &__cell {
    display: block;
    line-height: 1.3rem;

    &--border {
      border: 1px solid #dedede;
    }

    @media screen and (min-width: 600px) {
      display: table-cell;
      padding: 0 $horizontal-padding;
      &--padded {
        padding: $horizontal-padding;
      }
    }
  }

  &__cell-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    @media screen and (min-width: 600px) {
      display: block;
    }
  }

  &__picture {
    height: $picture-size;
    width: $picture-size;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
  }
}