astuto/app/javascript/stylesheets/components/Board.scss

.boardContainer {
  @extend
    .d-flex,
    .justify-content-between,
    .align-items-start;

  flex-direction: row;

  @include media-breakpoint-down(sm) {
    flex-direction: column;

    .postStatusFilterContainer {
      flex-direction: row !important;
      flex-wrap: wrap;
    }

    .postList { width: 100%; }
  }

  .newBoardContainer {
    background-color: $astuto-grey;
    text-align: center;

    .boardTitle {
      font-size: 25px;
      font-weight: 600;
    }
  }

  .postStatusListItemContainer {
    @extend
      .d-flex,
      .align-self-stretch;
  }

  .postStatusListItemLink {
    @extend
      .flex-grow-1;
  }

  .postStatusListItem {
    @extend
      .p-1;

    height: 40px;

    &:hover {
      filter: brightness(90%);
      cursor: pointer;
    }

    span.badge {
      display: block; font-size: 15px;
    }
  }

  .resetFilter {
    @extend
      .flex-grow-0,
      .flex-shrink-0,
      .rounded-circle,
      .align-self-center,
      .p-0;

    width: 30px;
    height: 30px;
  }

  .postList {
    @extend
      .d-flex,
      .flex-column,
      .flex-grow-1;
  }

  .postListItem {
    @extend
      .card3D,
      .d-flex,
      .flex-row,
      .justify-content-start,
      .mb-3,
      .p-3;

    height: 140px;
    color: $astuto-black;

    @include media-breakpoint-down(sm) {
      height: auto;
    }

    &:hover { cursor: pointer; }

    .postContainer {
      @extend
        .d-flex,
        .flex-column,
        .justify-content-between;
    }
  }

  .postTitle {
    @extend
      .font-weight-bold;
  }

  .postDetails {
    @extend
      .d-flex,
      .justify-content-start,
      .text-uppercase;

    .badge {
      @extend .mr-2;
    }
  }
}