.h-card {
  width: 100%;

  border-radius: 12px;

  /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
}

.h-card__holder {
  display: flex;
  padding: 50px 0;
  box-shadow: 0 1em 1em -1em rgba(0, 0, 0, .25);
}

.h-card .h-card__holder:nth-child(even) {
  flex-direction: row-reverse;
}

.h-card .h-card__holder:nth-child(even) .h-card__display-wrapper {
  margin-right: 0;
  margin-left: 24px;
}

.h-card__display {
  width: 360px;
  height: 220px;

  border-radius: 12px;
  transition: transform 0.5s ease-in-out;
}

.h-card__display-wrapper:hover .h-card__display {
  transform: scale(1.3);
}

.h-card__display-wrapper {
  width: 360px;
  min-width: 360px;
  height: 220px;

  border-radius: 12px;
  margin-right: 24px;

  overflow: hidden;
}

.h-card__header {
  display: flex;
}

.h-card__title-icon {
  width: 30px;
  height: 30px;
  filter: invert(11%) sepia(86%) saturate(4861%) hue-rotate(10deg) brightness(84%) contrast(121%);

  margin-right: 12px;
}

@media only screen and (max-width: 600px) {
  .h-card__title-icon {
    width: 15px;
    height: 15px;
    filter: brightness(0) invert(1);
    margin-right: 8px;
  }
}

.h-card__title {
  font-weight: 600;
  color: var(--colorPrimaryDark);

  margin: 0;
  margin-bottom: 10px;
}

@media only screen and (max-width: 600px) {
  .h-card__title {
    font-size: 12px;
    color: white;
  }
}

.h-card__data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  position: relative;
  overflow: hidden;
}

.h-card__content {
  margin: 0 0 10px 0;
  padding: 0;

  justify-content: center;
}

.h-card__button {
  height: 20px;

  font-size: 12px;
  font-weight: 600;

  text-transform: uppercase;

  color: rgb(153, 0, 0);
  text-decoration: underline;

  border-radius: 25px;

  display: flex;
  align-items: center;
}

.h-card__button .svg-inline--fa {
  margin-left: 10px;
  font-size: 15px;
}

.h-card__divider {
  margin-top: -10px;

}

.h-card__data-background {
  position: absolute;

  opacity: 0.04;

  filter: invert(11%) sepia(86%) saturate(4861%) hue-rotate(10deg) brightness(84%) contrast(121%);

  width: 80%;
  height: 80%;

  top: 10%;
  left: 30%;

  transition: opacity 0.2s ease-in-out;
}

.h-card__holder:hover .h-card__data-background {
  opacity: 0.1;
}

.engineering {
  transform: rotate(-15deg);
}
