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

.graphics {
  grid-gap: 40px;

  .graphic {
    max-width: 213px;

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

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

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

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

@media (max-width: @breakpoint-small-max) {
  .graphics {
    grid-gap: 20px;
  
    .graphic {
      max-width: 80px;
  
      &.graphic1 {
        transform: translateY(60%);
      }
  
      &.graphic2 {
        transform: translateY(45%);
      }
  
      &.graphic3 {
        transform: translateY(25%);
      }
  
      &.graphic4 {
        transform: translateY(45%);
      }
    }
  }
}
