Tablerow: Default

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

  border-top: 2px solid rgba($color-interactive1, .08);
  padding: ($gridspacing * 3) 0;

  .tablerow-x-subsection {
    margin-bottom: $gridspacing * 2;
  }

  .tablerow-x-cell {
    &:not(:last-child) {
      margin-bottom: $gridspacing * 2;
    }
  }

  .tablerow-x-mobileheader {
    @include textstyle-smallbold;

    span {
      font-weight: normal;
    }
  }

  .tablerow-x-mobileheader1 {
    margin-bottom: $gridspacing / 2;
  }

  .tablerow-x-title {
    @include textstyle-h2-compact;
    color: $color-interactive1;

    &:hover {
      text-decoration: underline;
    }
  }

  .tablerow-x-address {
    color: $color-dark3;
  }

  .tablerow-x-name {
    color: $color-dark3;

    span {
      @include textstyle-small;
      margin-left: $gridspacing;
    }
  }

  .tablerow-x-link {
    color: $color-interactive1;
  }

  .tablerow-x-phone {
    color: $color-dark3;
  }

  .tablerow-x-pathway {
    color: $color-dark3;
  }

  .tablerow-x-studentcount {
    color: $color-dark3;
  }

  .tablerow-x-col1 {
    display: none;
  }

  .tablerow-x-map {
    border-radius: $border-radius;
    height: $gridspacing * 18;
    width: $gridspacing * 18;
    pointer-events: none;

    * {
      cursor: default;
    }
  }

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

    border-top: none;
    display: table-row;
    padding: 0;

    .tablerow-x-mobileheader {
      display: none;
    }

    .tablerow-x-cell {
      border-top: 2px solid rgba($color-interactive1, .08);
      display: table-cell;
      padding: ($gridspacing * 2) 0;
      vertical-align: top;

      &:nth-child(2) {
        padding-right: $gridspacing * 2;
        padding-left: $gridspacing * 2;
      }
    }

    .tablerow-x-columns {
      display: flex;
    }

    .tablerow-x-col1 {
      display: block;
      margin-right: $gridspacing * 2;
    }
  }

  @media print {
    page-break-inside: avoid;
    width: 50%;

    a {
      color: $color-dark2 !important;
    }

    .tablerow-x-title {
      font-size: 20px;
    }
  }
}