.gallery {
  &-style1,
  &-style2 {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 30px;
    .popup-link {
      position: absolute;
      left: 50%;
      top: 20%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: var(--white-color);
      z-index: 1;
      border-radius: 50%;
      opacity: 0;
      visibility: hidden;
      font-size: 23px;
      color: var(--title-color);
      &:hover {
        background-color: var(--theme-color);
        color: var(--white-color);
      }
    }
    .overlay {
      &::before,
      &::after {
        position: absolute;
        content: "";
        left: 0;
      }
      &::after {
        width: 100%;
        height: 100%;
        background: linear-gradient(
          0deg,
          #272e39 0%,
          rgba(39, 46, 57, 0.35) 100%
        );
        opacity: 0.6;
        border-radius: 20px;
        @include smooth-transition;
      }
      &::before {
        width: 100%;
        height: 0%;
        background: linear-gradient(
          0deg,
          #7409f6 0%,
          rgba(116, 9, 246, 0) 100%
        );
        opacity: 0.9;
        visibility: hidden;
        bottom: 0;
        @include smooth-transition;
      }
    }
    .gallery {
      &-content {
        position: absolute;
        bottom: 0;
        margin: 30px;
        @include respond-below(xl) {
          margin: 15px;
        }
      }
      &-title {
        margin-bottom: 0;
        overflow: hidden;
        a {
          color: var(--white-color);
          @include smooth-transition;
          transform: translateY(0px);
          display: inline-block;
        }
      }
      &-date {
        color: var(--white-color);
        margin-bottom: 6px;
        overflow: hidden;
        span {
          display: inline-flex;
          align-items: center;
          transform: translateY(0px);
          gap: 10px;
          @include smooth-transition;
        }
      }
      &-thumb {
        img {
          @include respond-below(md) {
            width: 100%;
          }
        }
      }
    }
    &:hover {
      a.popup-link {
        top: 50%;
        opacity: 1;
        visibility: visible;
        @include respond-below(xl) {
          top: 40%;
          width: 60px;
          height: 60px;
          font-size: 20px;
        }
      }
      .gallery {
        &-title {
          a {
            transform: translateY(80px);
          }
        }
        &-date {
          span {
            transform: translateY(22px);
          }
        }
      }
      .overlay {
        &::after {
          opacity: 0;
          visibility: hidden;
        }
        &::before {
          opacity: 0.9;
          visibility: visible;
          height: 100%;
        }
      }
    }
  }
  &-style2 {
    .gallery-content {
      position: absolute;
      bottom: 70px;
      margin: 0;
      left: 70px;
      max-width: 60%;
      @include respond-below(xl) {
        bottom: 30px;
        left: 35px;
        max-width: 75%;
      }
    }
    .overlay {
      transform: scale(1);
      border-radius: 20px;
      overflow: hidden;
      @include smooth-transition;
      &::after,
      &::before {
        @include smooth-transition;
      }
      &::before {
        display: none;
      }
    }
    .gallery-title a,
    .gallery-date span {
      transform: translateY(80px);
    }
    .gallery-title {
      @include respond-below(xl) {
        font-size: 20px;
      }
    }
    &:hover {
      .gallery-title a,
      .gallery-date span {
        transform: translateY(0);
      }
      .overlay {
        transform: scale(0.9);
        @include smooth-transition;
        &::after {
          background: linear-gradient(
            0deg,
            #7409f6 100%,
            rgba(116, 9, 246, 1) 100%
          );
          opacity: 0.8;
          visibility: visible;
        }
      }
    }
    .popup-link {
      width: 80px;
      height: 80px;
      border-radius: 10px;
      font-size: 30px;
      &:hover {
        background-color: var(--title-color);
      }
    }
    .gallery-thumb {
      img {
        width: 100%;
      }
    }
  }
}

.filter-gallery {
  display: flex;
  justify-content: center;
  margin-right: -20%;
  @include respond-below(xl) {
    margin-right: 0;
  }
  @include respond-below(md) {
    margin-right: 0;
  }
  .gallery-thumb {
    img {
      width: 100%;
    }
  }
  .filter-item {
    width: 337.5px;
    height: 380px;
    margin-bottom: 30px;
    @include respond-below(xl) {
      width: 280px;
      height: 316px;
    }
    @include respond-below(lg) {
      width: 315px;
      height: 366px;
    }
    @include respond-below(md) {
      width: 230px;
      height: 255px;
    }
    @include respond-below(sm) {
      width: 100%;
      height: 630px;
    }
    &.grid-item--width2 {
      width: 675px;
      height: 380px;
      @include respond-below(xl) {
        width: 560px;
        height: 316px;
      }
      @include respond-below(lg) {
        width: 630px;
        height: 366px;
      }
      @include respond-below(md) {
        width: 460px;
        height: 255px;
      }
      @include respond-below(sm) {
        width: 100%;
        height: 305px;
      }
    }
  }
}

@media (max-width: 425px) {
  .filter-gallery .filter-item {
    height: 479.92px;
  }
  .filter-gallery .filter-item.grid-item--width2 {
    height: 229.17px;
  }
}
@media (max-width: 375px) {
  .filter-gallery .filter-item {
    height: 418.23px;
  }
  .filter-gallery .filter-item.grid-item--width2 {
    height: 199.72px;
  }
}
@media (max-width: 320px) {
  .filter-gallery .filter-item {
    height: 350.58px;
  }
  .filter-gallery .filter-item.grid-item--width2 {
    height: 167.31px;
  }
}