.brk-portfolio-card {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  height: 380px;
  color: #fff;
  perspective: 1000px; }
  .brk-portfolio-card__figure, .brk-portfolio-card__image {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0; }
  .brk-portfolio-card__image {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center; }
  .brk-portfolio-card__figure > * {
    transform: translateZ(0px); }
  .brk-portfolio-card .brk-tilter__figure {
    position: relative; }
  .brk-portfolio-card__deco {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease; }
  .brk-portfolio-card__caption {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    padding: 42px 34px 42px 34px; }
  .brk-portfolio-card__category {
    color: var(--white);
    border-radius: 20px;
    text-transform: uppercase;
    margin-left: 1px;
    padding: 5px 18px;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 5px 16px rgba(var(--brand-primary-rgb), 0.5);
    background-color: var(--brand-primary); }
  .brk-portfolio-card__title {
    margin-top: 20px;
    margin-left: 4px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease; }
  .brk-portfolio-card__link {
    text-decoration: underline;
    text-transform: uppercase;
    color: #fff;
    position: absolute;
    left: 41px;
    bottom: 41px;
    cursor: pointer;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s ease; }
  .brk-portfolio-card__btn-reverse {
    color: var(--brand-primary) !important;
    background: var(--white); }
    .brk-portfolio-card__btn-reverse .before {
      background-color: var(--white); }
    .brk-portfolio-card__btn-reverse .after {
      background-color: var(--white); }
  .brk-portfolio-card__btn__icon::before {
    color: var(--brand-primary); }
  .brk-portfolio-card__btn-reverse {
    position: absolute !important;
    right: 28px;
    bottom: 23px;
    font-weight: 100;
    z-index: 4;
    cursor: pointer;
    opacity: 0 !important;
    transition: opacity 0.3s ease; }
    .brk-portfolio-card__btn-reverse__icon {
      font-size: 18px; }
  .brk-portfolio-card:hover .brk-portfolio-card__deco, .brk-portfolio-card:hover .brk-portfolio-card__category, .brk-portfolio-card:hover .brk-portfolio-card__title, .brk-portfolio-card:hover .brk-portfolio-card__link, .brk-portfolio-card:hover .brk-portfolio-card__btn-reverse {
    opacity: 1 !important; }
  .brk-portfolio-card:hover .brk-portfolio-card__link {
    color: #fff; }