.is-layout-constrained:has(.is-style-image-full-width) {
  position: relative;
  overflow: hidden;
}

@media (max-width: 767px) {
  .is-style-image-full-width {
    margin-left: -15px;
  }

  .is-style-image-full-width img {
    width: 100%;
    margin-left: -15px;
  }
}

@media (min-width: 768px) {
  .is-style-image-full-width img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .is-style-image-full-width img {
    width: 45%;
  }

  .is-layout-constrained
    .wp-block-column:first-child:has(.is-style-image-full-width)
    img {
    left: 0;
  }

  .is-layout-constrained
    .wp-block-column:last-child:has(.is-style-image-full-width)
    img {
    right: 0;
  }

  /* firefox */
  @supports (-moz-appearance: none) {

    /* display none display blocks prevents the iamge from loading in the top and then moving since in firefox we are adding a class with js after page load */
    .is-style-image-full-width img {
        display: none;
    }

    .image-full-width-firefox .is-style-image-full-width img {
        display: block;
    }

    .image-full-width-firefox {
      position: relative;
      overflow: hidden;
    }

    .image-full-width-firefox img {
      left: 0;
    }

    .image-full-width-firefox img {
      right: 0;
    }
  }
}

.is-layout-constrained.block-editor-block-list__layout:has(
    .is-style-image-full-width
  )
  div,
.is-layout-constrained.block-editor-block-list__layout:has(
    .is-style-image-full-width
  )
  figure {
  position: initial !important;
}

.is-layout-constrained.block-editor-block-list__layout:has(
    .is-style-image-full-width
  )
  img {
  width: 45% !important;
  height: auto !important;
}

/* firefox */
@supports (-moz-appearance: none) {
  .is-layout-constrained.block-editor-block-list__layout.image-full-width-firefox
    div,
  .is-layout-constrained.block-editor-block-list__layout.image-full-width-firefox
    figure {
    position: initial !important;
  }

  .is-layout-constrained.block-editor-block-list__layout.image-full-width-firefox
    img {
    width: 45% !important;
    height: auto !important;
  }
}