assets/scss/components/_card.scss
.card {
    margin-bottom: 1rem;
    @extend %shadow-md;    
}
/* --- Employees --- */
.card {
  &-employee {
      @include make-container();
      margin:0rem auto 3rem auto;	
      &-row {
          @include make-row();
          // padding: 2rem;
      }
      &-col { 
          @include make-col-ready();
          margin: 0rem;
          padding: 0rem;
      }
      &-content {
          // @extend .box-shadow;			
          @extend %box-shadow-hover;
          @include make-row();
          border: .5px solid rgba($light-secondary,.25);
          border-radius: $border-radius;
          padding:1.75rem .55rem;
          margin: .5rem;
          // margin: .5rem .5rem .5rem .1rem;
          background-color: $white;
          position: relative;
          overflow: hidden;
          z-index: 1;
      }
      &-image {
          position: relative;
          overflow: hidden;
          z-index: 0;
          &:before {
              background-color: rgba($light-secondary,.5);
              background-image: url('#{$img-path}/trianglify-lowres.png');
              background-size: cover;
              background-blend-mode: darken;
              border-radius: $border-radius;
              content:"";
              position: absolute;
              height:50%;
              width: 100%;
              z-index: -1;
              left:0;
              right:0;
              top:0;

          }
      }
      p {
          font-size: .85rem;
      }
      .vcard {
          &:before, &:after {
              content: " ";
              position: absolute;
              background-color: lighten($light-secondary,7%);
              /* background-color: rgba($light-secondary,.5); */
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='351' height='292.5' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.03'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");
              background-size: cover;
              background-blend-mode: darken;
              height: 50.98%;
              left: 0;
              right: 0;
              width:50%;
          }
          &:before {
              z-index: 0;
              top:0;
              border-radius: 0px 50px 0px 0px;
          }
          &:after {
              z-index: -1;
              bottom:0;
              border-radius: 0px 0px 50px 0px;
          }
      }
  }	
  &-menu {
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .1);
    .card-title {
      transition: .5s ease !important;
      opacity: 0;
      transform: translateY(-100px);
      @extend %box-shadow;
    }
    &-price, &-disc {
      margin-left: .35rem;
      transition: .5s ease;
      transform: scale(0) translate(0);
      opacity: 0;
    }
    &-price {
      text-decoration: line-through;
      color: $danger;
    } 
    &-disc {
      color: $warning;
    }  
    &-body {
      padding-bottom: 1rem;
      .card-text {
        margin-bottom: .75rem;
      }
      .card-title {
        @extend %shadow-md;    
        position: absolute;
        background-color: rgba($warning,.85);
        top: 0rem;
        left: 0rem;
        display: block;
        width: 100%;
        padding: 1rem;
      }      
    } 
    &:hover {
      .card-title {
        opacity: 1;
        transform: translateY(0px);
      }
      .card-menu-price, .card-menu-disc {
        transform: scale(1) translate(-100px) !important;
        opacity: 1;
      }
    }     
  }
  &-profile {
    // max-width: 350px;
    // height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .075);
    margin: 30px auto 5px auto;
    transition: .5s ease;
    img {
      max-width: 100%;
      transition: .5s ease;
    }
    &-body {
      padding: 10px 20px;
      > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          font-weight: bold;
          span {
            display: block;
            padding: 5px;
            font-weight: 300;
            font-size: 0.8rem;
            color: $secondary;
          }
        }
        img {
          max-width: 50px;
          border-radius: 100%;
        }
      }      
    }
    &:hover {
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
      img {
        @extend %ilist-c;
      }
    }
    &-interactions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        display: flex;
        align-items: center;
        cursor: pointer;
        i {
          width: 20px;
          padding: 5px;
          margin-right: .15rem;
          opacity: 0.3;
        }
      }
    }
  }
}
/* --- Posts --- */
.boxed {
    @include make-row();
    margin-top:5rem;
    margin-bottom:5rem;
    &-left-side {
      position: relative;
      padding-top: 3rem;
      padding-bottom: 3rem;
      &:before {
        content:"";
        position: absolute;
        left:0;
        top:-15%;
        z-index: 0;
        width: 56%;
        height: 70px;
        opacity: .5;                
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQoU2NkIBIwEqmOgXyFU6dObQDZkp2dDaZhAMVEmCKYJLJi8hSCTCLKanwhQL6vcZkKAMbtEAuAaq67AAAAAElFTkSuQmCC') repeat;
      }
    }
    &-right-side {
      position: relative;
      padding-top: 3rem;
      padding-bottom: 3rem;
      &:before {
        content:"";
        position: absolute;            
        right:0;
        bottom:-8%;
        z-index: 0;
        width: 56%;
        height: 70px;
        opacity: .5;                
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQoU2NkIBIwEqmOgXyFU6dObQDZkp2dDaZhAMVEmCKYJLJi8hSCTCLKanwhQL6vcZkKAMbtEAuAaq67AAAAAElFTkSuQmCC') repeat;
      }
    }
    &-bottom {
      @include make-row();
      margin-top:2rem;
      margin-bottom:2rem;
      &-left,
      &-right {
        position: relative;
        overflow: hidden;
        margin-bottom: 1rem;
        &:before {
          content: "";
          position: absolute;
          right: -10%;
          top: 0;
          bottom: 0;
          z-index: -1;
          width: 640px;
          transform: rotate(-50deg);
          height: 180px;
          opacity: .45;
          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQoU2NkIBIwEqmOgXyFU6dObQDZkp2dDaZhAMVEmCKYJLJi8hSCTCLKanwhQL6vcZkKAMbtEAuAaq67AAAAAElFTkSuQmCC');
          background-position: top center;
          background-repeat: repeat;
          background-attachment: scroll;
        }
      }
      &-content {            
        background-color: rgba(#f1f1f1,.65);
        margin-top:1rem;
        margin-left:.5rem;
        margin-right:.5rem;
        padding:1.75rem;
      }    
    }
}
/* --- Profile --- */
.profile_card {
  // max-width: 350px;
  // height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .075);
  margin: 30px auto 5px auto;
  transition: .5s ease;
  img {
    max-width: 100%;
    transition: .5s ease;
  }
  &_body {
    padding: 10px 20px;
    > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        font-weight: bold;
        span {
          display: block;
          padding: 5px;
          font-weight: 300;
          font-size: 0.8rem;
          color: $secondary;
        }
      }
      img {
        max-width: 50px;
        border-radius: 100%;
      }
    }
    .profile_interactions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        display: flex;
        align-items: center;
        cursor: pointer;
        i {
          width: 20px;
          padding: 5px;
          margin-right: .15rem;
          opacity: 0.3;
        }
      }
    }
  }
  &:hover {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    img {
      @extend %ilist-c;
    }
  }
}