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

.boardContainer {
  @extend .twoColumnsContainer;

  @include media-breakpoint-down(sm) {
    .postStatusFilterContainer {
      flex-direction: row !important;
      flex-wrap: wrap;
    }

    .postList { width: 100%; }
  }

  .newPostContainer {
    background-color: var(--astuto-grey-light);
    text-align: center;

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

    .boardDescription {
      @extend .mutedText;
    }

    .newPostForm {
      @extend .my-2;
    }
  }

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

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

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

  .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: var(--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;
    }
  }
}