.card-shadow {
    box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.014),
        0 6.7px 5.3px rgba(0, 0, 0, 0.02),
        0 12.5px 10px rgba(0, 0, 0, 0.025),
        0 22.3px 17.9px rgba(0, 0, 0, 0.03),
        0 41.8px 33.4px rgba(0, 0, 0, 0.036),
        0 100px 80px rgba(0, 0, 0, 0.05);
}

.info-shadow {
    box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.014),
        0 6.7px 5.3px rgba(0, 0, 0, 0.02),
        0 12.5px 10px rgba(0, 0, 0, 0.025),
        0 22.3px 17.9px rgba(0, 0, 0, 0.03),
        0 41.8px 33.4px rgba(0, 0, 0, 0.036),
        0 100px 80px rgba(0, 0, 0, 0.05),
        0 0px 2.2px rgba(0, 0, 0, 0.045),
        0 0px 5.3px rgba(0, 0, 0, 0.065),
        0 0px 10px rgba(0, 0, 0, 0.08),
        0 0px 17.9px rgba(0, 0, 0, 0.095),
        0 0px 33.4px rgba(0, 0, 0, 0.115),
        0 0px 80px rgba(0, 0, 0, 0.16),
        0 0.2px 2.2px rgba(0, 0, 0, 0.014),
        0 0.6px 5.3px rgba(0, 0, 0, 0.02),
        0 1.1px 10px rgba(0, 0, 0, 0.025),
        0 2px 17.9px rgba(0, 0, 0, 0.03),
        0 3.8px 33.4px rgba(0, 0, 0, 0.036),
        0 9px 80px rgba(0, 0, 0, 0.05);
}

.info-overlay {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.25) 50%,
            transparent 100%);
}

.info-panel {
    width: 20px;
    height: 20px;
    transition: all 550ms ease;
}

.info-panel-1 {
    bottom: 47%;
    right: 80%;
}

.info-panel-2 {
    bottom: 35%;
    right: 35%;
}

.info-panel-3 {
    top: 10%;
    right: 5%;
}

.card:hover .info-panel {
    width: 100px;
    height: 100px;
}

.card:hover .info-panel-1 {
    right: 71%;
    transition-delay: 100ms;
    will-change: transform;
}

.card:hover .info-panel-2 {
     right: 20%;
     will-change: transform;
}

.card:hover .info-panel-3 {
    right: 5%;
    transition-delay: 200ms;
    will-change: transform;
}

.info-image-1 {
    top: -80%;
    left: -20%;
}

.info-image-2 {
    right: -20%;
    bottom: -80%;
}

.info-image-3 {
    top: -20%;
    right: -80%;
}

.card:hover .info-overlay {
    opacity: 1;
}

.card:hover .info-image {
    opacity: 1;
}

.card:hover .info-text {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 550ms;
}

.plus-icon {
    font-size: 20px;
    line-height: 1;
}


.card.hover-trigger .info-panel {
  width: 100px;
  height: 100px;
}

.card.hover-trigger .info-panel-1 {
  right: 71%;
  transition-delay: 100ms;
}

.card.hover-trigger .info-panel-2 {
   right: 20%;
}

.card.hover-trigger .info-panel-3 {
  right: 5%;
  transition-delay: 200ms;
}

.card.hover-trigger .info-overlay {
  opacity: 1;
}

.card.hover-trigger .info-image {
  opacity: 1;
}

.card.hover-trigger .info-text {
  opacity: 1;
  transform: translateY(0%);
  transition-delay: 550ms;
}