/* Smart Image Css */
.sp-image-ratio-1-1 {
  aspect-ratio: 1 / 1;
}
.sp-image-ratio-4-3 {
  aspect-ratio: 4 / 3;
}
.sp-image-ratio-3-2 {
  aspect-ratio: 3 / 2;
}
.sp-image-ratio-16-9 {
  aspect-ratio: 16 / 9;
}
.sp-image-ratio-2-1 {
  aspect-ratio: 2 / 1;
}
.sp-image-ratio-3-1 {
  aspect-ratio: 3 / 1;
}
.sp-image-ratio-4-1 {
  aspect-ratio: 4 / 1;
}
.sp-image-ratio-3-4 {
  aspect-ratio: 3 / 4;  
}
.sp-image-ratio-2-4 {
  aspect-ratio: 2 / 4;  
}
.sp-image-ratio-9-16 {
  aspect-ratio: 9 / 16;
}
.sp-position-top-left {
    top: 0;
    left: 0;
}
.sp-position-top-right {
    top: 0;
    left: unset;
    right: 0;
}
.sp-position-top-center {
    top: 0;
    left: 50%;
    transform: translateX( - 50% );
}
.sp-position-center-center {
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
}
.sp-position-bottom-left {
    top: unset;
    bottom: 0;
    left: 0;
}
.sp-position-bottom-right {
    top: unset;
    bottom: 0;
    left: unset;
    right: 0;
}
.sp-position-bottom-center {
    top: unset;
    bottom: 0;
    left: 50%;
    transform: translateX( - 50% );
}
.sp-position-center-left {
    top: 50%;
    left: 0;
    transform: translateY( - 50% );
}
.sp-position-center-right {
    top: 50%;
    left: unset;
    right: 0;
    transform: translateY( - 50% );
}

.sp-text-position-top {
    flex-direction: column-reverse;
}
.sp-text-position-bottom {
    flex-direction: column;
}
.sp-text-left {
  text-align: left;
}
.sp-text-center {
  text-align: center;
}
.sp-text-right {
  text-align: right;
}

// Animation zoom in
.sp-smart-image-area .sp-zoom-in {
  transform: scale( 1 );
}
.sp-smart-image-area:hover .sp-zoom-in {
  transform: scale( 1.1 );
}
.sp-smart-image-area .sp-zoom-out {
  transform: scale( 1.1 );
}
.sp-smart-image-area:hover .sp-zoom-out {
  transform: scale( 1 );
}
.sp-smart-image-area .sp-move-left {
  transform: scale( 1.1 );
}
.sp-smart-image-area:hover .sp-move-left {
  transform: scale(1.1) translateX(3%);
}
.sp-smart-image-area .sp-move-right {
  transform: scale( 1.1 );
}
.sp-smart-image-area:hover .sp-move-right {
  transform: scale(1.1) translateX( -3% );
}
.sp-smart-image-area .sp-move-top {
  transform: scale( 1.1 );
}
.sp-smart-image-area:hover .sp-move-top {
  transform: scale(1.1) translateY(3%);
}
.sp-smart-image-area .sp-move-bottom {
  transform: scale( 1.1 );
}
.sp-smart-image-area:hover .sp-move-bottom {
 transform: scale(1.1) translateY(-3%);
}
img.sp-smart-image {
  max-width: 100%;
}
.sp-overflow-hidden {
  overflow: hidden;
}
// .sp-d-flex {
//   display: flex;
// }
// .sp-justify-left {
//   justify-content: left;
// }
// .sp-justify-center {
//   justify-content: center;
// }
// .sp-justify-right {
//   justify-content: right;
// }

.sp-smart-post-block-wrapper {

    // .sp-smart-post-smart-image {
    //   overflow: hidden; // Comment out for box-shadow.
    // }

    .sp-smart-image-wrapper {
        margin: 0;
        &.sp-text-position-top,
        &.sp-text-position-bottom {
            display: flex;
        }
        &.sp-text-position-over-img {
            position: relative;
            .sp-smart-image-text-container {
              position: absolute;
              z-index: 1;
            }
            .sp-visibility-show-hover {
              width: 0;
              height: 0;
              visibility: hidden;
              opacity: 0;
              transition: opacity 0.3s ease-in-out;
            }
            &:hover .sp-visibility-show-hover {
              width: auto;
              height: fit-content;
              visibility: visible;
              opacity: 1;
            }
        }
        .sp-smart-image-text-container {
          display: flex;
          flex-direction: column;
          row-gap: 16px;
        }

        // .sp-smart-post.sp-smart-image-area {
        //   overflow: hidden; // comment out for box-shadow.
        // }

        .sp-smart-image-title,
        .sp-smart-image-caption {
          margin: 0
        }
    }

    .sp-smart-image-area {
      position: relative;
      box-sizing: border-box;
      transition: all 0.3s ease-in-out;
      mask-size: contain;
      mask-position: center center;
      mask-repeat: no-repeat;
      &:has( .sp-image-ratio-original ) {
        width: fit-content;
      }
      &.sp-has-bg {
        background: var(--smart-post-secondary);
      }

      .sp-smart-image:not( .sp-image-ratio-original ) {
        width: 100%;
      }
        
      .sp-smart-image {
          display: block;
          object-fit: cover;
          pointer-events: all;
          transition: all 0.3s ease-in-out;
      }
      .sp-smart-image-link-btn-wrapper {
        position: absolute;
        display: flex;
        padding: 10px;
        z-index: 1;

        .sp-smart-image-link-btn {
          display: inline-block;
          text-wrap: nowrap;
          cursor: pointer;
          transition: all 0.3s ease-in-out;
          user-select: none;
          &:focus {
            outline: none;
          }
        }
      }
    }
  .sp-smart-image-area {
    .sp-hover-img-overlay {
      transform: scale( 1 );
      transition: background 0.35s, transform 0.35s;
      pointer-events: none;
    }
  }
  .sp-smart-image-area:hover {
    .sp-hover-img-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      &.sp-selena {
        transform: scale( 0.95 );
      }
    }
  }
}

// Device wise Display Visibility
.sp-hide-on-desktop {
  display: none;
}
@media only screen and (max-width: 1023px) {
  .sp-hide-on-tablet {
    display: none;
  }
  .sp-smart-post-block-wrapper:not(.sp-hide-on-tablet) {
    display: block;
  }
}
@media only screen and (max-width: 599px) {
  .sp-smart-post-block-wrapper.sp-hide-on-mobile {
    display: none;
  }
  .sp-smart-post-block-wrapper:not(.sp-hide-on-mobile) {
    display: block;
  }
}

.sp-text {
  transition: transform 0.35s;
}

.sp-smart-image-area:has( .sp-smart-image.sp-jazz ) {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0px;
    left: -20%;
    width: 140%;
    height: 100%;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg) scale3d(1, 0, 1);
    opacity: 0;
    transition: opacity 0.35s, transform 0.35s;
    z-index: 1;
  }
  &:hover {
    .sp-text,
    .sp-smart-image {
      transform: scale(1.1);
    }
    &::after {
      transform: rotate(45deg) scale3d(1, 1, 1);
      opacity: 1;
    }
  }
}
.sp-smart-image-area:has( .sp-smart-image.sp-apollo ) {
  position: relative;
  overflow: hidden;

  .sp-text,
  .sp-smart-image {
      transform: scale(1.1);
    }
  &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 130%, 0);
      background: #fff;
      opacity: 0.6;
      transition: transform 0.5s;
      z-index: 1;
    }
  &:hover {
    .sp-text,
    .sp-smart-image {
      transform: scale(1);
    }
    &::after {
      transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -130%, 0);
    }
  }
}
.sp-smart-image-area:has( .sp-smart-image.sp-layla ) {
  position: relative;
  overflow: hidden;
  .sp-text  {
    transform: scale( 1 );
  }
  &:hover {
    .sp-text {
      transform: scale( 1.1 );
    }
  }

  &::before {
    content: '';
    position: absolute;
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: scale(0, 1);
    transform-origin: 0 0;
    transition: transform 0.35s;
    z-index: 2;
  }
  &::after {
    content: '';
    position: absolute;
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: scale(1, 0);
    transform-origin: 100% 0;
    transition: transform 0.35s;
    z-index: 2;
  }
  &:hover {
    &::before {
      opacity: 1;
      transform: scale(1);
    }
    &::after {
      opacity: 1;
      transform: scale(1);
    }
  }
}
.sp-smart-image-area:has( .sp-smart-image.sp-oscar ) {
  position: relative;
  overflow: hidden;
  .sp-text  {
    transform: scale( 1 );
  }
  &:hover {
    .sp-text {
      transform: scale( 1.1 );
    }
  }
  &::before {
    content: '';
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    opacity: 0;
    transform: scale(0);
    z-index: 2;
    transition: opacity 0.35s, transform 0.35s;
  }
  &:hover {
    &::before {
      opacity: 1;
      transform: scale(1);
    }
  }
}
.sp-smart-image-area:has( .sp-smart-image.sp-selena ) {
  .sp-text,
  .sp-smart-image {
    transform: scale( 1 );
  }
  &:hover {
    .sp-text,
    .sp-smart-image {
      transform: scale( 0.95 );
    }
  }
}