SVG clipped background scaling - how to preserve the aspect ratio?

Question

Background of the column components should scale with the containers an preserve the aspect ratio = stay always perfect circular like the clipping path shape is. I want later the clipping path to be of a more sophisticated shape but for demonstration purposes I use the circle.

This is how it looks now:

This is how it should be:

How to make the shape to stay always in the right aspect ratio and also scaling with the columns?

body {
  background-image: url("https://i.imgur.com/M6tL2a8.png");
    background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  color: #fff;
}

.row {
  width: 100%;
  min-height: 300px;
}

.column {
  width: 40%;
  height: 100%;
  min-height: 300px;
  display: inline-block;
  border: 1px dashed #555;
}

.bubble_container {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
}
.bubble_container p {
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-shadow: 1px 1px 1px #000;
}

.bubble_background {
  position: relative;
  display: block;
  min-width:100%;
  min-height: auto;
  background-image: linear-gradient(to bottom, rgba(255,0,0,0.2) 0%,rgba(0,0,0,0) 100%), url("https://i.imgur.com/M6tL2a8.png");
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  -webkit-clip-path: url(#clip_circle);
  clip-path: url(#clip_circle);
  filter: blur(3px);
  text-align: center;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" height="0">
  <defs>
    <clipPath id="clip_circle" clipPathUnits="objectBoundingBox">
      <circle cx="1" cy="1" r="1" id="circle" transform="scale(0.5 0.5)"/>
    </clipPath>
  </defs>
</svg>

<div class="row">
  <div class="column">
    <div class="bubble_container">
      <div class="bubble_background">&nbsp;</div>
          <p>Column#1</p>
    </div>
  </div>
  <div class="column">
    <div class="bubble_container">
      <div class="bubble_background">&nbsp;</div>
          <p>Column#1</p>
    </div>
</div>

</div>

Answer 1

I referred to the below SO Answer and applied it to get the solution.

SO Answer

If we want the same width as height. We just need to set the width to a percentage or value and also the padding-top to the same value.

body {
  background-image: url("https://i.imgur.com/M6tL2a8.png");
    background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  color: #fff;
}

.row {
  width: 100%;
  min-height: 300px;
}

.column {
  width: 40%;
  height: 100%;
  min-height: 300px;
  display: inline-block;
  border: 1px dashed #555;
}

.bubble_container {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
}
.bubble_container p {
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-shadow: 1px 1px 1px #000;
}

.bubble_background {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 100%;
  background-image: linear-gradient(to bottom, rgba(255,0,0,0.2) 0%,rgba(0,0,0,0) 100%), url("https://i.imgur.com/M6tL2a8.png");
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  -webkit-clip-path: url(#clip_circle);
  clip-path: url(#clip_circle);
  filter: blur(3px);
  text-align: center;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" height="0">
  <defs>
    <clipPath id="clip_circle" clipPathUnits="objectBoundingBox">
      <circle cx="1" cy="1" r="1" id="circle" transform="scale(0.5 0.5)"/>
    </clipPath>
  </defs>
</svg>

<div class="row">
  <div class="column">
    <div class="bubble_container">
      <div class="bubble_background"></div>
          <p>Column#1</p>
    </div>
  </div>
  <div class="column">
    <div class="bubble_container">
      <div class="bubble_background"></div>
          <p>Column#1</p>
    </div>
</div>

</div>