
.the7-image-box-wrapper {
  display: flex;
  height: 100%;
}

[class*='elementor-widget-the7_image_box'] .elementor-image-div {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: var(--img-space);
  order: var(--img-order);
  max-width: 100%;
  flex-grow: 1;
  width: ~"min(var(--box-width, var(--image-size)), 100%)";
  min-width: ~"min(var(--box-width, var(--image-size)), 100%)";
  transition: all 0.3s;
}
[class*='elementor-widget-the7_image_box'] .box-content-wrapper {
  width: 100%;
}
[class*='elementor-widget-the7_image_box'] .the7-box-wrapper,
[class*='elementor-widget-the7_image_box'] .box-content-wrapper {
  display: flex;
  flex-flow: var(--flex-flow);
}

[class*='elementor-widget-the7_image_box'] .box-content {
  width: var(--content-width);
}

[class*='elementor-widget-the7_image_box'] .post-thumbnail-rollover {
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
}

[class*='elementor-widget-the7_image_box'] .post-thumbnail-rollover:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 1;
  z-index: 1;
}

[class*='elementor-widget-the7_image_box'] .the7-hover-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

[class*='elementor-widget-the7_image_box'] .post-thumbnail-rollover:after {
  transition: all 0.3s ease;
}

a:hover .post-thumbnail-rollover:before,
.post-thumbnail-rollover:hover:before {
  [class*='elementor-widget-the7_image_box'] & {
    opacity: 0;
  }
}

a:hover .post-thumbnail-rollover:after,
.post-thumbnail-rollover:hover:after,
a.the7-box-wrapper:hover .the7-hover-icon,
.post-thumbnail-rollover:hover .the7-hover-icon {
  [class*='elementor-widget-the7_image_box'] & {
    opacity: 1;
  }
}

[class*='elementor-widget-the7_image_box'] img {
  position: var(--position, relative);
  top: 0;
  left: 0;
  width: var(--width);
  height: var(--height, auto);
  max-width: var(--max-width, 100%);
  max-height: var(--max-height);
  object-fit: var(--object-fit);
  aspect-ratio: var(--img-aspect-ratio);

  &.the7-svg-image {
    width: var(--svg-width, 100%);
  }
}
