Table: Default

.table {
  // attributes
  // &::psuedo elements
  // elements
  // .module-x-selector
  // &:psuedo
  // &.module-is-state
  // @media selectors

  .table-x-caption {
    @include textstyle-h1;
    padding-top: $gridspacing * 5;
    padding-bottom: $gridspacing * 2;
  }

  .table-x-thead {
    display: none;
  }

  @media (min-width: $media-desktop) {

    display: table;
    width: 100%;

    .table-x-caption {
      display: table-caption;
    }

    .table-x-thead {
      display: table-header-group;
    }

    .table-x-tbody {
      display: table-row-group;
    }
  }

  @media (min-width: $media-hd) {

    .table-x-caption {
      padding-top: $gridspacing * 8;
    }
  }

  @media print {

    .table-x-tbody {
      display: flex;
      flex-wrap: wrap;
    }

    .table-x-caption {
      @include textstyle-h2;
    }
  }
}