@import 'pagelayout';

@import "../elements/introduction";

.content_metiers{margin-bottom: @rules-peb;
  .hover-opacity{margin: @rules-peb auto 0 auto;
    &:hover{
      img{opacity: 1; .transition(none);}
      a img{opacity: 0.6;.transition(opacity, .3s, ease-out);}
      .content_metiers_title a{color: @link-hover-color;}
    }
  }
  .item-content{font-size: @font-size-extrasmall}
  &_title{margin-bottom: 10px; margin-top: 0;
    a{color: @text-color; display: block}
  }
  &_subtitle{font-size: @font-size-small; text-transform: uppercase;.open-sans-bold;}
}

@media(min-width: 768px){
  .content{
    &_metiers{display: table; border-spacing: 30px; margin-top: -40px; width: 100%;
      &.just{
        &-two-item{width: 530px;
          @media(min-width: @screen-md){width: 677px}
          @media(min-width: @screen-lg){width: 810px}
          .hover-opacity{width: 50%}
        }
        &-one-item{width: 280px;
          @media(min-width: @screen-md){width: 354px}
          @media(min-width: @screen-lg){width: 420px}
          .hover-opacity{width: 100%}
        }
      }
      &:before, &:after{display: none}
      .hover-opacity{display: table-cell; vertical-align: top; float: none; padding: 0;
        &:before{position: absolute; border: 1px solid @greycc; content: ''; height: 100%; width: 100%; z-index: 1}
        figure{position: relative; z-index: 2;
          img{width: 100%; height: auto;}
        }
        .item-content{border-left: none; border-right: none; border-bottom: none;z-index: 2; position: relative;}
      }
    }
  }
}