@import "variables";
.block-galleryimage-default{
  width: 100%;
  .wrapper-gallery-item {
    width: 100%;
    height: 290px;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
      height: 255px;
    }
    &:hover {
      .layer-content {
        &::after {
          opacity: 1;
          -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
          transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
        }
        h3, .description {
          opacity: 1;
          -webkit-transform: scale3d(1,1,1);
          transform: scale3d(1,1,1);
        }
      }
      .layer-grey {
        background-color: rgba(0, 0, 0, 0.5);
      }
      .img-box-service {
        opacity: 0.7;
        -webkit-transform: scale3d(1.05,1.05,1);
        transform: scale3d(1.05,1.05,1);
      }

    }
    .img-box-service {
      width: 100%;
      height: 100%;
      webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
      transition: opacity 0.35s, transform 0.35s;
      opacity: 0.8;
      div {
        width: 100%;
        height: 100%;
        padding-bottom: calc(100% * 290 / 380);
        position: relative;
        @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
          padding-bottom: calc(100% * 255 / 329);
        }
        img{
          width: 100%;
          height: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          object-position: center;
          object-fit: cover;
        }
      }
    }
    .layer-grey {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background-color: rgba(5, 4, 57, 0.4);
      -webkit-transition: -webkit-transform 0.35s;
      transition: transform 0.35s;
    }
    .layer-content {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      padding: 30px;
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        content: '';
        opacity: 0;
        -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
        transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
      }
      h3 {
        font-size: @font-size-h3;
        font-weight: @font-weight-semibold;
        line-height: @line-height-computed-h4;
        text-align: center;
        text-transform: uppercase;
        margin-bottom: 10px;
        padding-top: 20%;
        webkit-transform: scale3d(0.8,0.8,1);
        transform: scale3d(0.8,0.8,1);
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
          padding-top: 15%;
          margin-bottom: 0;
        }
        a {
          color: @text-color-4;
        }
      }
      .description {
        opacity: 0;
        padding: 10px 35px;
        webkit-transform: scale3d(0.8,0.8,1);
        transform: scale3d(0.8,0.8,1);
        webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
          padding: 10px 10px;
        }
        @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
          padding: 10px 10px;
        }
        @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
          padding: 10px 10px;
        }
        p {
          font-size: @font-size-base;
          color: @text-color-4;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          height: 68px;
          overflow: hidden;
          text-overflow: ellipsis;
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
            height: 61px;
          }
          @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
            height: 61px;
          }
          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            height: 61px;
          }
        }
      }
    }
  }

}