@import "assets/src/scss/utils/variables";

.wcf--image-gallery {
  display: grid;
  align-items: center;

  .icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transform: translateX(-101%);
    transition: all 0.7s;

    i {
      display: inline-block;
      position: absolute;
      inset-inline-start: 0%;
      top: 50%;
      z-index: 9;
      font-size: 20px;
      color: #fff;
      opacity: 0;
      transition: all 0.6s;
      transform: translate(-50%, -50%);
    }
  }

  a {
    display: block;
    position: relative;
    line-height: 0;

    &:hover {
      .icon {
        transform: translateX(0%);
      }

      i {
        opacity: 1;
        inset-inline-start: 50%;
      }
    }
  }

  .wcf--gallery-item {
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &.style-2 {
    align-items: start;

    .wcf--gallery-item:nth-child(even) {
      margin-top: 120px;

      @media #{$xl} {
        margin-top: 90px;
      }

      @media #{$lg} {
        margin-top: 60px;
      }

      @media #{$sm} {
        margin-top: 0;
      }
    }
  }
}

.elementor-widget-wcf--image-gallery {
  &.wcf--image {
    &-effect-zoom-in,
    &-effect-zoom-out,
    &-left-move,
    &-right-move {
      img {
        transition: all 0.5s;
      }

      .wcf--gallery-item {
        overflow: hidden;
      }
    }

    &-effect-zoom-in {
      img {
        transform: scale(1);
      }

      .wcf--gallery-item:hover {
        img {
          transform: scale(1.1);
        }
      }
    }

    &-effect-zoom-out {
      img {
        transform: scale(1);
      }

      .wcf--gallery-item:hover {
        img {
          transform: scale(0.9);
        }
      }
    }

    &-left-move {
      img {
        transform: scale(1.1);
      }

      .wcf--gallery-item:hover {
        img {
          transform: scale(1.1) translateX(4%);
        }
      }
    }

    &-right-move {
      img {
        transform: scale(1.1);
      }

      .wcf--gallery-item:hover {
        img {
          transform: scale(1.1) translateX(-4%);
        }
      }
    }
  }
}
