astuto/app/javascript/stylesheets/general/_components.scss

.card {
  @extend .card;

  box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.15);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);

  color: #333;

  padding: 8px;
}

.card3D {
  @extend
    .card;

  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);

  &:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }
}

.sidebar {
  position: sticky;
  top: 60px;

  .sidebarCard {
    @extend
      .card,
      .d-flex,
      .flex-column,
      .justify-content-start,
      .align-items-center,
      .flex-grow-0,
      .flex-shrink-0,
      .my-3,
      .p-2;

    width: 250px;
    margin-right: 16px;
  }
}

@include media-breakpoint-down(sm) {
  .sidebar {
    position: relative;
    width: 100%;
    top: 0;

    .sidebarCard { width: 100%; }
  }
}

.badge {
  @extend
    .badge,
    .badge-pill,
    .p-2;

  font-size: 13px;
}

.badgeLight {
  @extend .badge-light;

  background-color: $astuto-grey;
}