.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% !important;
  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;
}