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

@home-curator-image-size: 136px;

.home-background {
  background-color: @global-inverse-color;
}

.tablet-section {
  background-image:linear-gradient(180deg, @global-inverse-color 0%, @global-muted-background 100%);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

@media only screen and (min-width: @breakpoint-medium) {
  .tablet-section {
    background-image:url("~src/assets/monitor-assets/home/monitor-dark-logo.svg"), linear-gradient(180deg, @global-inverse-color 0%, @global-muted-background 100%);
    background-repeat: no-repeat;
    background-position: -5% 95%, top;
    background-size: 60%, cover;
  }
}

.graph-background {
  background-image: url('~src/assets/monitor-assets/home/graph.svg');
  background-position-y: 50%;
  background-position-x: -5%;
  background-size: 25%;
}

#bullets {
  & > div {
    max-width: 360px !important;
  }
}

.contact-us {

  img {
    position: absolute;
    width: @home-curator-image-size;
    height: @home-curator-image-size;
    object-fit: cover;
    border-radius: 18px;


    &.one {
      top: 0;
      left: @global-medium-gutter + (@home-curator-image-size/2);
      transform: rotate(10deg);
    }

    &.two {
      bottom: 0;
      left: @global-medium-gutter;
      transform: rotate(-10deg);
      object-position: top;
    }

    &.three {
      top: 0;
      right: @global-medium-gutter;
      transform: rotate(-10deg);
      object-position: -60px;
    }

    &.four {
      bottom: 0;
      right: @global-medium-gutter + (@home-curator-image-size/2);
      transform: rotate(-10deg);
      object-position: 0;
    }
  }
}