@import (reference) "~src/assets/extend-theme/less/_import-variables.less";
@import (reference) "~src/assets/openaire-theme/less/mixin.less";

@training-color: #A8B9FF;
@webinar-color: #E0C44F;

.graphics {
  grid-gap: 40px;

  .graphic {
    max-width: 213px;

    &.graphic1 {
      transform: translateY(60%);
    }

    &.graphic2 {
      transform: translateY(45%);
    }

    &.graphic3 {
      transform: translateY(25%);
    }

    &.graphic4 {
      transform: translateY(45%);
    }
  }
}

.card {
  height: 325px;
  background-repeat: no-repeat;
  background-position: center;

  &.webinar {
    background-image: url("~/src/assets/irish-assets/resources/resources-green.png");
  }

  &.training {
    background-image: url("~/src/assets/irish-assets/resources/resources-pink-blue.png");
  }

  .info {
    height: 50%;
    .set-blur-background(@dark-color, 50%, brightness(0.5) blur(20px));

    a {
      display: none;
    }
  }

  &:hover {
    .info {
      height: 100%;
  
      a {
        display: inline-block;
      }
    }
  }
}
.uk-label.training {
  background-color: @training-color;
  border-color: @training-color;
}

.uk-label.webinar {
  background-color: @webinar-color;
  border-color: @webinar-color;
}

.uk-label.funder {
  background-color: @funder-color;
  border-color: @funder-color;
  color: @global-inverse-color;
}

.uk-label.organization {
  background-color: @organization-color;
  border-color: @organization-color;
  color: @global-inverse-color;
}