/* =copy-image block
*/

.block-copy-image {
  margin: var(--wp--custom--layout--block-gap) auto;
}

.block-copy-image .block-copy-image__inner-container {
  position: relative;
}
.block-copy-image .block__image {
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: 100%;
}
.block-copy-image .block-copy-image__inner-container .block__image .wp-block-image {
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.block-copy-image .block-copy-image__inner-container .block__image .wp-block-image img {
  width: 100%;
}
.block-copy-image .block__copy {
  margin: var(--wp--custom--layout--block-gap) auto;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
}
.block-copy-image .block__heading {
  margin: 0;
}
.block-copy-image .block__subheading {
  margin: 0;
}
@media only screen and (max-width: 55em) {
  .wp-block-group .block-copy-image,
  .block-copy-image {
    width: 100%;
  }
}
@media only screen and (min-width: 55em) {
  .block-copy-image {
    margin: var(--wp--custom--spacing--xl) 0;
  }
  .block-copy-image.block-copy-image-left .block-copy-image__inner-container,
  .block-copy-image.block-copy-image-right .block-copy-image__inner-container {
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: 1fr 1fr;
  }
  .block-copy-image.block-copy-image-left .block-copy-image__inner-container {
  }
  .block-copy-image.block-copy-image-right .block-copy-image__inner-container {
  }
  .block-copy-image .block__image {
    margin: 0 auto;
    grid-area: 1 / 1 / 2 / 2;
  }
  .block-copy-image .block-copy-image__inner-container .block__image {
    order: 2;
  }
  .block-copy-image .block__copy {
    max-width: 100%;
    margin: 0;
    width: 100%;
    padding: var(--wp--custom--layout--padding-large);
    grid-area: 1 / 2 / 2 / 3;
  }
  .block-copy-image .block-copy-image__inner-container .block__copy {
    order: 1;
  }
  .block-copy-image .block-copy-image__inner-container .block__copy > *:last-child {
    margin-bottom: 0;
  }

  /*Flipped Layout*/
  .block-copy-image.block-copy-image-right .block-copy-image__inner-container .block__copy {
    order: 2;
    grid-area: 1 / 1 / 2 / 2;
  }
  .block-copy-image.block-copy-image-right .block-copy-image__inner-container .block__image {
    order: 1;
    grid-area: 1 / 2 / 2 / 3;
  }
}