<div class="wp-block-media-text">
  <div class="wp-block-media-text__text">
    <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h1>
    <p>Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. </p>
    <a href="#" class="button">Read more</a>
  </div>
  <div class="wp-block-media-text__media">
    <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" />
  </div>
</div>

<svg class="clip-paths">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
    <path d="M0.255,0.176 a0.264,0.318,0,0,1,-0.086,0.065 c-0.046,0.021,-0.143,0.081,-0.162,0.182 c-0.023,0.146,0.012,0.261,0.121,0.315 c0.073,0.042,0.192,0,0.214,0 c0.02,0,0.081,-0.008,0.174,0.138 c0.048,0.076,0.122,0.122,0.201,0.124 c0.051,0.001,0.107,-0.015,0.16,-0.067 c0.046,-0.045,0.08,-0.107,0.096,-0.176 A0.686,0.827,0,0,0,0.999,0.58 c0.02,-0.378,-0.277,-0.666,-0.578,-0.557 q-0.003,0.001,-0.007,0.003 c-0.052,0.02,-0.097,0.059,-0.13,0.111 c-0.007,0.01,-0.016,0.022,-0.03,0.039"></path>
  </clipPath>
</svg>

.wp-block-media-text__media {
  position: relative;
  padding-top: 100%;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    object-fit: cover;
    clip-path: url("#my-clip-path");
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2.5%;
    right: 0;
    bottom: 0;
    background-image: url("https://assets.codepen.io/596723/red-bubble-clean.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
}

.clip-paths {
  width: 0;
  height: 0;
  overflow: hidden;
}

// Demo styles

.wp-block-media-text {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5rem;
  margin-left: 5rem;
  margin-right: 5rem;
  align-items: center;
  max-width: 1200px;
}

body {
  background: #fff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
  padding-bottom: 100px;
}

h1 {
  font-size: 3.2rem;
  line-height: 1.1;
  margin-bottom: 30px;
}

p {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 30px;
}

.button {
  display: inline-block;
  padding: 15px 35px;
  border-radius: 9999px;
  background-color: #ce0037;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}