.cardimage {
  border: 1px solid $color-interactive1;
  display: block;
  max-width: 288px;
  height: 100%;
  width: 100%;
  overflow: hidden;

  img {
    display: block;
    height: auto;
    width: 100%;
    filter: grayscale(100%);
    transition: transform $transition-duration $transition-easing;
  }

  .cardimage-x-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    width: $gridspacing * 13;
    height: $gridspacing * 13;
  }

  .cardimage-x-top {
    position: relative;

    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  .cardimage-x-bottom {
    background: $color-light1;
    min-height: 115px;
    padding: ($gridspacing * 2.5) ($gridspacing * 3);
    position: relative;
  }

  .cardimage-x-text {
    @include textstyle-h2-compact;
    color: $color-interactive1;
    // @include multiline-text-background($color-light2, $color-interactive1);
  }

  &:hover {

    .cardimage-x-top {
      img {
        transform: scale(1.1);
      }
    }

    .cardimage-x-text {
      text-decoration: underline;
    }
  }

  @media (min-width: $media-mobilelarge) {
    max-width: none;
  }
}

.cardimage-agriculture {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-agriculture);
    }
  }
}

.cardimage-hospitality {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-hospitality);
    }
  }
}

.cardimage-arts {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-arts);
    }
  }
}

.cardimage-health {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-health);
    }
  }
}

.cardimage-construction {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-construction);
    }
  }
}

.cardimage-manufacturing {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-manufacturing);
    }
  }
}

.cardimage-education {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-education);
    }
  }
}

.cardimage-transportation {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-transportation);
    }
  }
}

.cardimage-energy {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-energy);
    }
  }
}

.cardimage-publicservices {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-publicservices);
    }
  }
}

.cardimage-engineering {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-engineering);
    }
  }
}

.cardimage-sales {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-sales);
    }
  }
}

.cardimage-fashion {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-fashion);
    }
  }
}

.cardimage-communication {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-communication);
    }
  }
}

.cardimage-business {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-business);
    }
  }
}